select下拉框 JS原生 / jQuery 获取选中值、设置当前选项等

桃扇骨 2022-05-10 14:10 273阅读 0赞

![在这里插入图片描述][70]

### JS原生版： ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
    <select name="" id="s1" onchange="getVal()">
        <option value="1" data-val="a">11111</option>
        <option value="2" data-val="b">22222</option>
        <option value="3" data-val="c">33333</option>
    </select>
    
    <script>
        var currentSel = document.getElementById('s1');
    
        var index = currentSel.selectedIndex;   //获取选中的索引值
    
        console.log(  index  );
    
        console.log(  currentSel.options[index].text  );    //获取选中的文本
    
        console.log(  currentSel.options[index].value  );   //获取选中的值
    </script>
    
    </body>
    </html>

![在这里插入图片描述][70 1]

### jQuery版： ###

<script src="../jquery-1.12.4.min.js"></script>
    	<script>
    	    function getVal() {
    	        //获取选中值 value
    	        // console.log($("#s1").val());
    	
    	        //获取选中文本
    	        // console.log($("#s1").find("option:selected").text());
    	        // 或
    	        // console.log($("#s1 option:selected").text());
    	
    	        //获取选中的属性值
    	        // console.log($("#s1").find("option:selected").attr("data-val"));
    	        // 或
    	        // console.log($("#s1 option:selected").attr("data-val"));
    	
    	        //获取选中的索引:
    	        //console.log($("#s1").get(0).selectedIndex);
    	    }
    	
    	    function setVal() {
    	        //设置选中项
    	        //$("#s1").val(2);
    	        // 或
    	        $("#s1").get(0).selectedIndex =2;
    	    }
    	
    	    $(document).ready(function () {
    	        setVal();
    	    })
    	
    	
    	</script>

[70]: /images/20220505/68b356579088417ab15bbfb34ffac64d.png
[70 1]: /images/20220505/9045b22279194181ba84baf2818e87e0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，273人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript原生获取多选下拉框选中的值

下拉框一般都是单选的, 所以直接通过document.querySelector('select').value就可以知道选中的值了. 如果只是想判断是否有选中的话还可以通过

青旅半醒/ 2023年03月02日 13:13/ 0 赞/ 25 阅读

相关 select 下拉框不可选中

select 下拉框不可选中 disabled属性定义和用法浏览器支持实例业务应用移除disab

你的名字/ 2022年12月25日 14:53/ 0 赞/ 370 阅读

相关 JavaScript && jQuery获取radio/下拉框的选中值

JavaScript获取radio选中值 <ww:iterator value="proceList" status="rowstatus" id="it">

待我称王封你为后i/ 2022年09月23日 12:00/ 0 赞/ 247 阅读

相关 vue提交select下拉框选中的值

写在前面的而一些啰嗦的话: vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。 Star指数：69.7k G

墨蓝/ 2022年09月05日 04:09/ 0 赞/ 265 阅读

相关 vue提交select下拉框选中的值

例子 <template> <div class="tab-container"> <div class="filter-containe

向右看齐/ 2022年08月29日 09:39/ 0 赞/ 235 阅读

相关 Javascript获取select下拉框选中的的值

现在有一id=test的下拉框，怎么拿到选中的那个值呢？分别使用javascript原生的方法和jquery方法 <select id="test" name="test

深藏阁楼爱情的钟/ 2022年07月12日 02:45/ 0 赞/ 251 阅读

相关 Javascript获取select下拉框选中的的值

现在有一id=test的下拉框，怎么拿到选中的那个值呢？分别使用javascript原生的方法和jquery方法 <select id="test" name="test

本是古典何须时尚/ 2022年07月12日 02:45/ 0 赞/ 230 阅读

相关 Javascript获取select下拉框选中的的值

现在有id=test的下拉框，怎么拿到选中的那个值呢？分别使用javascript原生的方法和jquery方法 <select id="test" name="

川长思鸟来/ 2022年06月14日 09:10/ 0 赞/ 338 阅读

相关 select下拉框 JS原生 / jQuery 获取选中值、设置当前选项等

![在这里插入图片描述][70] JS原生版： <!DOCTYPE html> <html lang="en"> <head>

桃扇骨/ 2022年05月10日 14:10/ 0 赞/ 274 阅读

相关 js获取多个select下拉框选中的值

js获取多个select下拉框选中的值 var electronicIds = \[\]; $("select\[name='electronicId'\]").eac

清疚/ 2022年02月26日 20:20/ 0 赞/ 545 阅读