Rumah > hujung hadapan web > tutorial js > select中指定option选中触发事件详解

select中指定option选中触发事件详解

小云云
Lepaskan: 2018-03-17 15:17:54
asal
11291 orang telah melayarinya

我们在用到下拉列表框select时,需要对选中的

如果我们要得到select的全部的值就用一个for循环来实现。代码如下:

var vi = document.all['list'].length;
for(var i=0;i<vi;i++){
document.form2.list(i).value; //form2是<form>的名称
}
Salin selepas log masuk
js方法:
‍‍<select id="pid" onchange="gradeChange()">
    <option grade="1" value="a">选项一</a>
    <option grade="2" value="b">选项二</a>
</select>
<script type="text/JavaScript">
       function gradeChange(){
        var objS = document.getElementById("pid");
        var grade = objS.options[objS.selectedIndex].grade;
        alert(grade);
       }
</script>
jq方法:
<select name="myselect" id="myselect">
    <option value="opt1">选项1</option>
    <option value="opt2">选项2</option>
    <option value="opt3">选项3</option>
</select>
 
$("#myselect").change(function(){
    var opt=$("#myselect").val();
    ...
});
Salin selepas log masuk

Javascript获取select下拉框选中的的值
现在有一id=test的下拉框,怎么拿到选中的那个值呢?
分别使用javascript原生的方法和jquery方法

<select id="test"  name="">   
  <option   value="1">text1</option>   
  <option   value="2">text2</option>   
 </select>
Salin selepas log masuk

一:javascript原生的方法
  1:拿到select对象: var  myselect=document.getElementById("test");
  2:拿到选中项的索引:var index=myselect.selectedIndex ;          // selectedIndex代表的是你所选中项的index
  3:拿到选中项options的value:  myselect.options[index].value;
  4:拿到选中项options的text:  myselect.options[index].text;
二:jquery方法(前提是已经加载了jquery库)
1:var options=$("#test option:selected");  //获取选中的项
2:console.log(options.val());   //拿到选中项的值
3:console.log(options.text());   //拿到选中项的文本

相关推荐:

select的option叠加怎样处理

javascript删除select中的所有option代码分享

Html中Select的option怎样设置默认选择

Atas ialah kandungan terperinci select中指定option选中触发事件详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan