jQuery取得select选择的文本与值

Posted 2020-08-19 郭子仪

 jQuery取得select选择的文本与值

  1 jquery获取select选择的文本与值
  2 获取select ：
  3 获取select 选中的 text :
  4     $("#ddlregtype").find("option:selected").text();
  5 
  6 获取select选中的 value:
  7     $("#ddlregtype ").val();
  8 
  9 获取select选中的索引:
 10     $("#ddlregtype ").get(0).selectedindex;
 11 
 12 设置select:
 13 设置select 选中的索引：
 14     $("#ddlregtype ").get(0).selectedindex=index;//index为索引值
 15 
 16 设置select 选中的value：
 17     $("#ddlregtype ").attr("value","normal“);
 18     $("#ddlregtype ").val("normal");
 19     $("#ddlregtype ").get(0).value = value;
 20 
 21 设置select 选中的text:
 22 
 23     var count=$("#ddlregtype option").length;
 24       for(var i=0;i<count;i++)
 25          {           if($("#ddlregtype ").get(0).options[i].text == text)
 26             {
 27                 $("#ddlregtype ").get(0).options[i].selected = true;
 28                 break;
 29             }
 30         }
 31     $("#select_id option[text=‘jquery‘]").attr("selected", true);
 32 
 33 设置select option项:
 34 
 35     $("#select_id").append("<option value=‘value‘>text</option>");  //添加一项option
 36     $("#select_id").prepend("<option value=‘0‘>请选择</option>"); //在前面插入一项option
 37     $("#select_id option:last").remove(); //删除索引值最大的option
 38     $("#select_id option[index=‘0‘]").remove();//删除索引值为0的option
 39     $("#select_id option[value=‘3‘]").remove(); //删除值为3的option
 40     $("#select_id option[text=‘4‘]").remove(); //删除text值为4的option
 41 
 42 清空 select:
 43 
 44     $("#ddlregtype ").empty();
 45 
 46 工作需要，要获得两个表单中的值。如图：
 47 
 48 如何获得从左边选择框添加到右边选择框中的值？我想了想用网页特效可以获得，这里用了比较流行的jquery。
 49 js代码如下：
 50 
 51     //获取所有属性值 var item = $("#select1").val();
 52     $(function(){
 53       $(‘#select1‘).each(  //获得select1的所有值
 54          function(){
 55             $(‘button‘).click(function(){
 56                 alert($(‘#select2‘).val());  //获得select2中的select1值
 57             });
 58          });
 59     })
 60     </script>
 61 
 62 值得注意的是，不能直接写成
 63 
 64     $(function(){
 65       $(‘#select2‘).each(  //获得select1的所有值，因为前面讲选项从左边添加到右边，jquery其实并没有真正将值从左边传到右边。
 66          function(){
 67             $(‘button‘).click(function(){
 68                 alert($(this).val());  //获得select2中的select1值
 69             });
 70          });
 71     })
 72 
 73 html：
 74     <div class="centent">
 75             <select multiple="multiple" id="select1" name="dd" style="width:100px;height:160px;">
 76                 <option value="1">选项1</option>
 77                 <option value="2">选项2</option>
 78                 <option value="3">选项3</option>
 79                 <option value="4">选项4</option>
 80                 <option value="5">选项5</option>
 81                 <option value="6">选项6</option>
 82                 <option value="7">选项7</option>
 83             </select>
 84             <div>
 85                 <span id="add" >选中添加到右边&gt;&gt;</span>
 86                 <span id="add_all" >全部添加到右边&gt;&gt;</span>
 87             </div>
 88         </div>
 89         <div class="centent">
 90             <select multiple="multiple" id="select2" name="sel" style="width: 100px;height:160px;">
 91             </select>
 92             <div>
 93                 <span id="remove">&lt;&lt;选中删除到左边</span>
 94                 <span id="remove_all">&lt;&lt;全部删除到左边</span>
 95             </div>
 96         </div>
 97 
 98 使用JQuery，Ajax调用动态填充Select的option选项
 99 
100     //绑定ClassLevel1单击事件
101         $("#ClassLevel1").change(function () {
102             var id = $("#ClassLevel1").val();
103             var level2 = $("#ClassLevel2");
104             level2.empty();
105             $("#ClassLevel3").hide();
106             $.ajax({
107                 url: "./askCommon.ashx?action=getclasslevel&pid=" + id,
108                 data: { "type": "ajax" },
109                 datatype: "json",
110                 type: "get",
111                 success: function (data) {
112                     var json = eval_r(data);
113                     for (var ind in json) {
114                         level2.append($("<option value=‘" + json[ind].id + "‘>" + json[ind].typename + "</option>"));
115                     }
116     
117                 }
118             });
119         })