本文目录


    JS实现select选中option触发事件操作示例

    我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发。

    想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件。

    又在select中添加onclick 这下可好了,没选option呢就触发了。

    百度来的说option没有触发事件,需要在select中加onchange事件,虽然我曾经处理过类似的问题,用过就忘是不是猪脑子....

    当我们触发select的双击事件时,用ondblclick方法。 当我们要取得select的选中事件时,用document.all['name'].value来获取,其中name是select的名称。 如果我们要得到select的全部的值就用一个for循环来实现。代码如下:

    var vi = document.all['list'].length;
    for(var i=0;i<vi;i++){
      document.form2.list(i).value; //form2是<form>的名称
    }

    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>

    jQuery实现代码:

    <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();
      ...
    });

    Javascript获取select下拉框选中的值

    现在有一id=test的下拉框,怎么拿到选中的那个值呢?

    分别使用javascript原生的方法和jquery方法

    <select id="test" name="">
     <option value="1">text1</option>
     <option value="2">text2</option>
    </select>

    一、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.拿到选中项的值 alert(options.val());

    3.拿到选中项的文本 alert(options.text());

    文章作者:  BigYoung
    版权声明:  本网站所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 BigYoung !



    z