www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

jQuery达成select下拉框获取当前入选文本

2019-08-09 03:52 来源:未知

jQuery实现select下拉框获取当前选中文本、值、索引以及添加/删除Select的Option项,jqueryoption

//直接保存后缀.htnl用谷歌浏览器打开,亲测有效
<head>
<script src="http://www.god137.com/uploads/allimg/190809/03524M3a-0.jpg"></script>
<script>
 $(function(){
       //为Select添加事件,当选择其中一项时触发
     $("select:eq(0)").change(function(){
          //code
        });
     //获取Select选中的Text:结果是由所有匹配元素包含的文本内容组合起来的文本
     var checkText = $("select:eq(0) :selected").text();//建议用这个简单
                    = $("select:eq(0) option:selected").tetx();
                    = $("#One").find(":selected").text();
                    = $("#One").find("option:selected").text();

    //如果多选,将返回一个数组,其包含所选的值。
     var checkValue = $("#select_id").val();
    //获取Select选中匹配元素的当前值,即[即使多选也只]取得第一个匹配元素的val内容
     var checkValue = $("select:eq(0) :selected").val();//=========强烈建议用这个,以防多选

     //获取Select选中的索引值
     var checkIndex = $("#select_id ").get(0).selectedIndex; 
     //获取Select最大的索引值 
     var maxIndex = $("#select_id :last").prop("index");  //建议用这个
                  = $("#select_id option:last").prop("index"); 
                  = $("select:eq(0)").find(":last").prop("index")
                  = $("select:eq(0)").find("option:last").prop("index")

    //=========================================================================================
    //jQuery设置Select选择的 Text和Value:
    // 设置Select的Value值为4的项选中
    $("#select_id ").val(4); //用这个 
    $("#select_id  [value='4']").prop("selected", true);
    $("#select_id  option[value='4']").prop("selected", true);
    //设置select中的第一个option被选中
    $("select :first").prop("selected", true);//这个
    $("select :first").prop("selected", 'selected'); 
    $("select option:first").prop("selected", "true"); 
    $("select option:first").prop("selected", "selected"); 

    //============================================================================================
    //jQuery添加/删除Select的Option项
    $("#select_id").append("<option value='Value'>Text</option>");   //为Select末尾追加一个Option(下拉项)
    $("#select_id").prepend("<option value='0'>请选择</option>");  //为Select首部插入一个Option(第一个位置)
    $("#select_id :last").remove();  //删除Select中索引值最大Option(最后一个)
    $("#select_id :fist").remove();  //删除Select中索引值最小为0Option(第一个)
    $("#select_id [value='3']").remove();   //删除Select中Value='3'的Option

  });
 </script>
</head>
<table>
    <tr>
          <td>
              <!--multiple设定下拉框可以多选,size设定下拉框不呈现下拉方式,-->
              <select size="12" id="One" multiple="multiple">
                    <option value='1'>苹果</option>
                    <option value="2">香蕉</option>
                    <option value="3">草莓</option>
                    <option value="4">橘子</option>
              </select>
          </td>
          <td>
                  <input type="button" value=">>>"><br>
                  <input type="button" value="&nbsp;>&nbsp;"><br>
                  <input type="button" value="&nbsp;<&nbsp;"><br>
                  <input type="button" value="<<<"><br>

          </td>
          <td>
                 <select size="12" id="two" multiple="multiple">
                      <option value="5">葡萄</option>
                 </select>

          </td>

          <td>
                  <input type="button" value="&nbsp;up&nbsp;"><br><br>
                  <input type="button" value="down"><br>
          </td>
    </tr>
</table>

 

//直接保存后缀.htnl用谷歌浏览器打开,亲测有效...

TAG标签:
版权声明:本文由澳门新葡8455手机版发布于Web前端,转载请注明出处:jQuery达成select下拉框获取当前入选文本