$("#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();//清空下拉框