Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung des Triggerereignisses, wenn die angegebene Option in „select' ausgewählt wird

小云云
Freigeben: 2018-03-17 15:17:54
Original
11203 Leute haben es durchsucht

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

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

var vi = document.all['list'].length;
for(var i=0;i<vi;i++){
document.form2.list(i).value; //form2是<form>的名称
}
Nach dem Login kopieren
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();
    ...
});
Nach dem Login kopieren

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

<select id="test"  name="">   
  <option   value="1">text1</option>   
  <option   value="2">text2</option>   
 </select>
Nach dem Login kopieren

一: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怎样设置默认选择

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Triggerereignisses, wenn die angegebene Option in „select' ausgewählt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!