javascript

位置:IT落伍者 >> javascript >> 浏览文章

jQuery对select操作小结(遍历option,操作option)


发布日期:2018年11月04日
 
jQuery对select操作小结(遍历option,操作option)
本篇文章是关于jQuery对select的操作进行了总结介绍需要的朋友可以参考下

//遍历option和添加移除option
function changeShipMethod(shipping){
var len = $("select[@name=ISHIPTYPE] option")length
if(shippingvalue != "CA"){
$("select[@name=ISHIPTYPE] option")each(function(){
if($(this)val() == ){
$(this)remove();
}
});
}else{
$("<option value=>UPS Ground</option>")appendTo($("select[@name=ISHIPTYPE]"));
}
}
//取得下拉选单的选取值
$(#testSelect option:selected)text();
$("#testSelect")find(option:selected)text();
$("#testSelect")val();
//////////////////////////////////////////////////////////////////
记性不好的可以收藏下
下拉框:
var cc = $("formc select[@name=country] option[@selected]")text(); //得到下拉菜单的选中项的文本(注意中间有空格)
var cc = $(formc select[@name="country"])val(); //得到下拉菜单的选中项的值
var cc = $(formc select[@name="country"])attr("id"); //得到下拉菜单的选中项的ID属性值
$("#select")empty();//清空下拉框//$("#select")html();
$("<option value=></option>")appendTo("#select")//添加下拉框的option

稍微解释一下:
select[@name=country] option[@selected] 表示具有name 属性

并且该属性值为country 的select元素 里面的具有selected 属性的option 元素
可以看出有@开头的就表示后面跟的是属性

单选框:
$("input[@type=radio][@checked]")val(); //得到单选框的选中项的值(注意中间没有空格)
$("input[@type=radio][@value=]")attr("checked"checked); //设置单选框value=的为选中状态(注意中间没有空格)

复选框:
$("input[@type=checkbox][@checked]")val(); //得到复选框的选中的第一项的值
$("input[@type=checkbox][@checked]")each(function(){ //由于复选框一般选中的是多个所以可以循环输出
alert($(this)val());
});

$("#chk")attr("checked");//不打勾
$("#chk")attr("checked"true);//打勾
if($("#chk")attr(checked)==undefined){} //判断是否已经打勾
当然jquery的选择器是强大的 还有很多方法
<script src="jqueryjs" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document)ready(function(){
$("#selectTest")change(function()
{
//alert("Hello");
//alert($("#selectTest")attr("name"));
//$("a")attr("href""xxhtml");
//windowlocationhref="xxhtml";
//alert($("#selectTest")val());
alert($("#selectTest option[@selected]")text());
$("#selectTest")attr("value" "");

});
});
</script>

<a href="#">aaass</a>
<!下拉框>
<select id="selectTest" name="selectTest">
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
<option value=""></option>
</select>
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)[]selectedIndex = ;
radio单选组的第二个元素为当前选中值
$(input[@name=items])get()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");//填充内容
多选框checkbox$("#chk")attr("checked");//不打勾
$("#chk")attr("checked"true);//打勾
if($("#chk")attr(checked)==undefined) //判断是否已经打勾
单选组radio $("input[@type=radio]")attr("checked");//设置value=的项目为当前选中项
下拉框select$("#sel")attr("value"sel);//设置value=sel的项目为当前选中项
  $("<optionvalue=></option><optionvalue=>  </option>")appendTo("#sel")//添加下拉框的option
$("#sel")empty()//清空下拉框

获取一组radio被选中项的值
var item = $(input[@name=items][@checked])val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]")text();
select下拉框的第二个元素为当前选中值
$(#select_id)[]selectedIndex = ;
radio单选组的第二个元素为当前选中值
$(input[@name=items])get()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");//填充内容
多选框checkbox $("#chk")attr("checked");//不打勾
$("#chk")attr("checked"true);//打勾
if($("#chk")attr(checked)==undefined) //判断是否已经打勾
单选组radio $("input[@type=radio]")attr("checked");//设置value=的项目为当前选中项
下拉框select $("#sel")attr("value"sel);//设置value=sel的项目为当前选中项
$("<option value=></option><option value=></option>")appendTo("#sel")//添加下拉框的option
$("#sel")empty()//清空下拉框

               

上一篇:控制字体大小JS代码

下一篇:JQuery设置和去除disabled属性