How to use the select component in jquery

This time I will bring you how to use the select component in jquery, and what are the precautions for using the select component in jquery. The following is a practical case, let's take a look.

jquery gets the text and value selected by select

Get select:

Get the selected text of select:

$(“#ddlregtype”).find(“option:selected”).text();

Get the selected value of select:

$(“#ddlregtype “).val();

Get the selected index of select:

$(“#ddlregtype “).get(0).selectedindex;

Set select ：

Set select selected index:

$(“#ddlregtype “).get(0).selectedindex=index;//index为索引值

Set select selected value:

(“#ddlregtype “).attr(“value”,”normal“);(“#ddlregtype “).attr(“value”,”normal“);(“#ddlregtype “).val(“normal”); 
$(“#ddlregtype “).get(0).value = value;

Set select selected 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);

Set the select option item:

$("#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

Clear the select:

$("#ddlregtype ").empty();

Work needs to get the values ​​​​in the two forms. As shown in the picture:

How to get the value added from the left selection box to the right selection box? I thought about using web page special effects to get it, and the more popular jquery was used here.

js code is as follows:

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

It is worth noting that it cannot be written directly as

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

html:

Option 1
Option 2
Option 3
Option 4
Option 5
Option 6
Option 7

Select to add to the right>>
Add all to the right>>

<<

Use JQuery and Ajax to call the option of dynamically filling the Select Option

//绑定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($("" + json[ind].typename + ""));
        }
      }
    });
  })

 I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! 
Recommended reading:
How to achieve jquery carriage return login effect
Case and detailed explanation of mouse out event
 
Detailed explanation of the use of WebSocket
The above is the detailed content of How to use the select component in jquery. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to achieve jquery carriage return login effectNext article：How to achieve jquery carriage return login effect
Related articles
See more
AlloyTouch full-screen scrolling plug-in creates a smooth H5 page in 30 seconds
HTML5 actual combat and analysis of touch events (touchstart, touchmove and touchend)
Detailed explanation of image drawing examples in HTML5 canvas 9
Regular expressions and new HTML5 elements
How to combine NodeJS and HTML5 to drag and drop multiple files to upload to the server
Public welfare online PHP training，Help PHP learners grow quickly！
About usDisclaimerSitemap
                © php.cn All rights reserved