Heim > Web-Frontend > js-Tutorial > Wie erhält jQuery den von select ausgewählten Text und Wert? (Codebeispiel)

Wie erhält jQuery den von select ausgewählten Text und Wert? (Codebeispiel)

不言
Freigeben: 2018-10-26 16:20:31
nach vorne
2079 Leute haben es durchsucht

本篇文章给大家带来的内容是关于jQuery如何获取select选择的文本与值,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

获取select :

获取select 选中的 text :

   $("#ddlregtype").find("option:selected").text();
Nach dem Login kopieren

获取select选中的 value:

  $("#ddlregtype ").val();
Nach dem Login kopieren

获取select选中的索引:

  $("#ddlregtype ").get(0).selectedindex;
Nach dem Login kopieren
设置select:

设置select 选中的索引:

   $("#ddlregtype ").get(0).selectedindex=index;//index为索引值
Nach dem Login kopieren

设置select 选中的value:

    $("#ddlregtype ").attr("value","normal“);
    $("#ddlregtype ").val("normal");
    $("#ddlregtype ").get(0).value = value;
Nach dem Login kopieren

设置select 选中的text:

   var count=$("#ddlregtype option").length;
      for(var i=0;i<count;i++)
         {           if($("#ddlregtype ").get(0).options[i].text == text)
            {
                $("#ddlregtype ").get(0).options[i].selected = true;
                break;
            }
        }
    $("#select_id option[text=&#39;jquery&#39;]").attr("selected", true);
Nach dem Login kopieren

设置select option项:

    $("#select_id").append("<option value=&#39;value&#39;>text</option>");  //添加一项option
    $("#select_id").prepend("<option value=&#39;0&#39;>请选择</option>"); //在前面插入一项option
    $("#select_id option:last").remove(); //删除索引值最大的option
    $("#select_id option[index='0']").remove();//删除索引值为0的option
    $("#select_id option[value='3']").remove(); //删除值为3的option
    $("#select_id option[text='4']").remove(); //删除text值为4的option
Nach dem Login kopieren

清空 select:

  $("#ddlregtype ").empty();
Nach dem Login kopieren

工作需要,要获得两个表单中的值。如图:

如何获得从左边选择框添加到右边选择框中的值?我想了想用网页特效可以获得,这里用了比较流行的jquery。
js代码如下:

<script>
  //获取所有属性值 var item = $("#select1").val();
    $(function(){
      $('#select1').each(  //获得select1的所有值
         function(){
            $('button').click(function(){
                alert($('#select2').val());  //获得select2中的select1值
            });
         });
    })
    </script>
Nach dem Login kopieren

值得注意的是,不能直接写成

   $(function(){
      $('#select2').each(  //获得select1的所有值,因为前面讲选项从左边添加到右边,jquery其实并没有真正将值从左边传到右边。
         function(){
            $('button').click(function(){
                alert($(this).val());  //获得select2中的select1值
            });
         });
    })
Nach dem Login kopieren

html代码:

   <div class="centent">
            <select multiple="multiple" id="select1" name="dd" style="width:100px;height:160px;">
                <option value="1">选项1</option>
                <option value="2">选项2</option>
                <option value="3">选项3</option>
                <option value="4">选项4</option>
                <option value="5">选项5</option>
                <option value="6">选项6</option>
                <option value="7">选项7</option>
            </select>
            <div>
                <span id="add" >选中添加到右边&gt;&gt;</span>
                <span id="add_all" >全部添加到右边&gt;&gt;</span>
            </div>
        </div>
        <div class="centent">
            <select multiple="multiple" id="select2" name="sel" style="width: 100px;height:160px;">
            </select>
            <div>
                <span id="remove">&lt;&lt;选中删除到左边</span>
                <span id="remove_all">&lt;&lt;全部删除到左边</span>
            </div>
        </div>
Nach dem Login kopieren

使用JQuery,Ajax调用动态填充Select的option选项

<script>
//绑定ClassLevel1单击事件
        $("#ClassLevel1").change(function () {
            var id = $("#ClassLevel1").val();
            var level2 = $("#ClassLevel2");
            level2.empty();
            $("#ClassLevel3").hide();
            $.ajax({
                url: "./askCommon.ashx?action=getclasslevel&pid=" + id,
                data: { "type": "ajax" },
                datatype: "json",
                type: "get",
                success: function (data) {
                    var json = eval_r(data);
                    for (var ind in json) {
                        level2.append($("<option value=&#39;" + json[ind].id + "&#39;>" + json[ind].typename + "</option>"));
                    }
    
                }
            });
        })
</script>
Nach dem Login kopieren


Das obige ist der detaillierte Inhalt vonWie erhält jQuery den von select ausgewählten Text und Wert? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:segmentfault.com
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