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 为激活中文输入法