1.點擊對應按鈕,設置選擇表單的值
直接上原代碼吧,呵呵
html代碼
按鈕樣式
~~~
<button type="button" id="A" class="btn btn-success" > A </button>
<button type="button" id="B" class="btn btn-success" > B </button>
<button type="button" id="C" class="btn btn-success" > C </button>
<button type="button" id="D" class="btn btn-primary" > D </button>
~~~
成績代碼
~~~
<lable>語文:</lable><select name="score[1]" class="selector">
<option ></option>
<option >A</option>
<option >B</option>
<option>C</option>
<option >D</option>
</select>
<lable>數學:</lable><select name="score[2]" class="selector">
<option ></option>
<option >A</option>
<option >B</option>
<option>C</option>
<option >D</option>
</select>
~~~
JQuery代碼
~~~
<script>
$(function(){
$("#A").click(function(){
$(".selector").val("A");
alert('已成功將所有學生成績設置為:A');
});
$("#B").click(function(){
$(".selector").val("B");
alert('已成功將所有學生成績設置為:B');
});
$("#C").click(function(){
$(".selector").val("C");
alert('已成功將所有學生成績設置為:C');
});
$("#D").click(function(){
// $(".selector").val("D");
// 或者
$(".selector").find("option:selected").attr("selected", false);
$(".selector option:contains('D')").attr("selected", true);
alert('已成功將所有學生成績設置為:D');
});
});
~~~
1.根據值選中radio表單項。
實例:(根據身份證號,得到出生日期與性別,并改寫指定表單域中。)
~~~
<div class="form-group">
<label class="col-md-2 control-label required">身份證號</label>
<div class="col-md-4">
<input name="sfz" id="sfz" value="33102320" class="form-control" type="text" style="ime-mode:inactive">
</div>
<div class="col-md-1" id="sfzinfo"></div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">出生日期</label>
<div class="col-md-3">
<div class="input-group">
<input name="date" id="birthday" value="" class="time form-control input-group date form_datetime" type="text" style="ime-mode:inactive">
<span class="input-group-btn"> <button class="btn btn-default" type="button">田</button> </span>
</div>
<label class="col-md-2 control-label">性別:</label>
<div class="col-md-5" id='sexbox'>
<label class="radio-inline"> <input type="radio" name="sex" value="男" checked="checked" > 男</label>
<label class="radio-inline"> <input type="radio" name="sex" value="女" > 女</label>
<label class="radio-inline"> <input type="radio" name="sex" value="保密" > 保密</label>
</div>
</div>
<script>
$(function(){
function GetBirthdatByIdNo(iIdNo){
var tmpStr = "";
var birthday = $("#birthday");
iIdNo = $.trim(iIdNo);
if(iIdNo.length == 18){
tmpStr = iIdNo.substring(6, 14);
tmpStr = tmpStr.substring(0, 4) + "-" + tmpStr.substring(4, 6) + "-" + tmpStr.substring(6);
sexStr = parseInt(iIdNo.substring(17, 1),10) % 2 ? "男" : "女";
birthday.val(tmpStr);
$("#sfzinfo").html('<i class="icon icon-check"></i>');
$(":radio[name='sex'][value='" + sexStr + "']).prop("checked", "checked");
}else{
$("#sfzinfo").text(iIdNo.length);
tmpStr="請輸入出生日期";
birthday.val(tmpStr);
}
}
$("#sfz").blur(function(){
GetBirthdatByIdNo($(this).val());
});
});
</script>
~~~
注意事項
1. ` $(":radio[name='sex'][value='" + sexStr + "']).prop("checked", "checked");`
使用“prop”函數,而不要使用"attr".
2. ime-mode:inactive 為激活英文輸入法
ime-mode:active 為激活中文輸入法