jquery操作select

 jQuery獲取Select選擇的contentValue: 

$("#select_id").change(function(){//code...}); //爲Select添加事件,當選擇其中一項時觸發
 
var checkText=$("#select_id").find("option:selected").text(); //獲取Select選擇的text
 
var checkValue=$("#select_id").val(); //獲取Select選擇的Value
 
var checkIndex=$("#select_id ").get(0).selectedIndex; //獲取Select選擇的索引值
 
var maxIndex=$("#select_id option:last").attr("index"); //獲取Select最大的索引值


jQuery添加/刪除Select的Option項: 

$("#select_id").append("<option value='Value'>Text</option>"); //爲Select追加一個Option(下拉項)
 
$("#select_id").prepend("<option value='0'>請選擇</option>"); //爲Select插入一個Option(第一個位置)
 
$("#select_id option:last").remove(); //刪除Select中索引值最大Option(最後一個)
 
$("#select_id option[index='0']").remove(); //刪除Select中索引值爲0的Option(第一個)
 
$("#select_id option[value='3']").remove(); //刪除Select中Value='3'的Optiona
 
$("#select_id option[text='4']").remove(); //刪除Select中Text='4'的Optiona


內容清空:

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

1、設置value爲pxx的項選中

     $(".selector").val("pxx");

2、設置text爲pxx的項選中

    $(".selector").find("option[text='pxx']").attr("selected",true);

    這裏有一箇中括號的用法,中括號裏的等號的前面是屬性名稱,不用加引號。很多時候,中括號的運用可以使得邏輯變得很簡單。

3、獲取當前選中項的value

    $(".selector").val();

4、獲取當前選中項的text

    $(".selector").find("option:selected").text();

自己寫的一個select2級聯動(Thinkphp3.2.3版本的)

js部分:
<script> 
       function send() {
            var id = $("#cate").val();
            $.ajax({
                type: 'post',
                url: "__MODULE__/Train/send",
                data: {id: id},
                success: function (data) {
                    //清空第二個select,解決無法顯示BUG
                    $("#list").empty();
                        $.each(data, function (i) {
                            $("#list").append("<option value='" + data[i]['train_id'] + "'>" + data[i]['name'] + "</option>");
                        });
                },
                dataType: 'json'
            });
        }
</script>
html部分

                                <select class="form-control m-b" id="cate" οnchange="send();"
                                        style="width: 40%;min-width: 300px;">
                                    <option>請選擇類別</option>
                                    <foreach name="data" item="vo">
                                        <if condition="$vo.level eq 1">
                                            <optgroup label="{$vo.name}">
                                                <else/>
                                                <option id="train" value="{$vo.id}" οnclick="send('{$vo.id}')">
                                                    {$vo.name}
                                                </option>
                                        </if>

                                    </foreach>

                                </select>
                            </div>
                        </div>


                        <div class="form-group">
                            <label class="col-sm-3 control-label">課程:</label>
                            <div class="col-sm-8">
                                <select class="form-control m-b" name="id" style="width: 40%;min-width: 300px;" id="list">
                                </select>
                            </div>
                        </div>

jQuery獲取Select選擇的Text和Value:
語法解釋:

$("#select_id").change(function(){//code...});   //爲Select添加事件,當選擇其中一項時觸發
var checkText=$("#select_id").find("option:selected").text();  //獲取Select選擇的Text
var checkValue=$("#select_id").val();  //獲取Select選擇的Value
var checkIndex=$("#select_id ").get(0).selectedIndex;  //獲取Select選擇的索引值
var maxIndex=$("#select_id option:last").attr("index");  //獲取Select最大的索引值

jQuery設置Select選擇的 Text和Value:
語法解釋:

$("#select_id ").get(0).selectedIndex=1;  //設置Select索引值爲1的項選中
$("#select_id ").val(4);   // 設置Select的Value值爲4的項選中
$("#select_id option[text='jQuery']").attr("selected", true);   //設置Select的Text值爲jQuery的項選中

jQuery添加/刪除Select的Option項:
語法解釋:

$("#select_id").append("<option value='Value'>Text</option>");  //爲Select追加一個Option(下拉項)
$("#select_id").prepend("<option value='0'>請選擇</option>");  //爲Select插入一個Option(第一個位置)
$("#select_id option:last").remove();  //刪除Select中索引值最大Option(最後一個)
$("#select_id option[index='0']").remove();  //刪除Select中索引值爲0的Option(第一個)
$("#select_id option[value='3']").remove();  //刪除Select中Value='3'的Option
$("#select_id option[text='4']").remove();  //刪除Select中Text='4'的Option


jquery radio取值,checkbox取值,select取值,radio選中,checkbox選中,select選中,及其相關 

獲 取一組radio被選中項的值 
var item = $('input[name=items][checked]').val(); 
獲 取select被選中項的文本 
var item = $("select[name=items] option[selected]").text(); 
select下拉框的第二個元素爲當前選中值 
$('#select_id')[0].selectedIndex = 1; 
radio單選組的第二個元素爲當前選中值 
$('input[name=items]').get(1).checked = true; 
獲取值: 
文本框,文本區域:$("#txt").attr("value"); 
多選框 checkbox:$("#checkbox_id").attr("value"); 
單選組radio:   $("input[type=radio][checked]").val(); 
下拉框select: $('#sel').val(); 
控制表單元素: 
文本框,文本區域:$("#txt").attr("value",'');//清空內容 
$("#txt").attr("value",'11');//填充內容 
多選框checkbox: $("#chk1").attr("checked",'');//不打勾 
$("#chk2").attr("checked",true);//打勾 
if($("#chk1").attr('checked')==undefined) //判斷是否已經打勾 
單選組 radio:    $("input[type=radio]").attr("checked",'2');//設置value=2的項目爲當前選中項 
下拉框 select:   $("#sel").attr("value",'-sel3');//設置value=-sel3的項目爲當前選中項 
$("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option 
$("#sel").empty();//清空下拉框


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章