jQuery对下拉框、单选框、多选框的处理
经过一段时间的工作,终于对jquery有了初步的认识,现在将以前遇到的一些简单的jquery操作分享给大家,希望能够对大家有所帮助:
实例如下:
<select name="sltList" id="sltList">
<option value="3">请选择</option>
<option value="1">张三</option>
<option value="2">李四</option>
</select>
下拉框:
//得到下拉菜单的选中项的文本(注意中间有空格)
var cc1 = $(‘#sltList option:selected’).text();
//得到下拉菜单的选中项的值
var cc1 = $(‘#sltList option:selected’).val();
//得到下拉菜单的选中项的ID属性值
var cc3 =
$(‘#sltList option:selected’).attr("id");
//清空下拉框//
$("#select").empty(); or
$("#select").html('');
//添加下拉框的option
$("<optionvalue='1'>1111</option>").appendTo("#select")
单选框:
//得到单选框的选中项的值(注意中间没有空格)
$(“input[name=’radio1’]:checked”).attr(“id”);
$(“input[name=’radio1’]:checked”).val();
//设置单选框value=2的为选中状态.(注意中间没有空格)
$("input[value=’2’]").attr("checked",'checked');
复选框:
//得到复选框的选中的第一项的值
$("input[name=’test’]:checked").val();
//由于复选框一般选中的是多个,所以可以循环输出
$("input[name=’test’]:checked").each(function(){
alert($(this).val());
});
//不打勾
$("#chk1").attr("checked",'');
//打勾
$("#chk2").attr("checked",true);
//判断是否已经打勾
if($("#chk1").attr('checked')==false){}
---------------------------------------------------------------------------------
近日在使用jquery操作select下拉列表框时遇到了一些需要注意的地方,我想实现的功能是通过点击事件动态复制一个select到table的td中,并利用td包含的文本内容找到对应的select选中项,代码如下:
HTML:
<!--下拉框-->
<select id="stsoft" name="stsoft">
<option value="1">11</option>
<option value="2">22</option>
<option value="3">33</option>
<option value="4">44</option>
<option value="5">55</option>
<option value="6">66</option>
</select>
<table id="datatable" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr align="left">
<th>
行号</th>
<th>
软件类型</th>
<th>
操作</th>
</tr>
</thead>
<tr id="template">
<td class="RowId">
</td>
<td class="SoftType">
</td>
<td class="update">
</td>
</tr>
</table>
js:
$(".update").click(function(){
var soft = $(".SoftType").text();
$(".SoftType").html($("#stsoft").clone());
for(var i=0; i<$(".SoftType select option").length; i++){
if($(".SoftType select")[0].options(i).text== soft){
$(".SoftType select")[0].selectedIndex = i;
}
}
var
rowId = $(".RowId").text();
var content='\
<a href="javascript:void(0);">更新</a> \
<a href="javascript:void(0);">取消</a>\
';
$(".update").html(content);
});