熱點推薦:
您现在的位置: 電腦知識網 >> 編程 >> Java編程 >> JSP教程 >> 正文

jQuery對select操作小結(遍歷option,操作option)

2013-11-15 12:02:31  來源: JSP教程 
本篇文章是關於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()//清空下拉框


From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20142.html
    推薦文章
    Copyright © 2005-2013 電腦知識網 Computer Knowledge   All rights reserved.