JQuery操做select下拉框

獲取Select選擇的Text和Value

• $("#select_id").change(function(){//code...}); //爲Select添加事件，當選擇其中一項時觸發
• varcheckText=$("#select_id").find("option:selected").text(); //獲取Select選擇的Text
• varcheckValue=$("#select_id").val(); //獲取Select選擇的Value
• var checkIndex=$("#select_id").get(0).selectedIndex; //獲取Select選擇的索引值
• var maxIndex=$("#select_idoption:last").attr("index"); //獲取Select最大的索引值

設置Select選擇的Text和Value

• $("#select_id").get(0).selectedIndex=1; //設置Select索引值爲1的項選中
• $("#select_id").val(4); // 設置Select的Value值爲4的項選中
• $("#select_idoption[text='jQuery']").attr("selected", true); //設置Select的Text值爲jQuery的項選中

添加/刪除Select的Option項

• $("#select_id").append("<optionvalue='Value'>Text</option>"); //爲Select追加一個Option(下拉項)
• $("#select_id").prepend("<optionvalue='0'>請選擇</option>"); //爲Select插入一個Option(第一個位置)
• $("#select_idoption:last").remove(); //刪除Select中索引值最大Option(最後一個)
• $("#select_idoption[index='0']").remove(); //刪除Select中索引值爲0的Option(第一個)
• $("#select_idoption[value='3']").remove(); //刪除Select中Value='3'的Option
• $("#select_idoption[text='4']").remove(); //刪除Select中Text='4'的Option

radio、checkbox、select取值，radio、checkbox、select選中，及其相關

• var item = $('input@name=items').val(); //獲取一組radio被選中項的值
• var item = $("select[@name=items]option[@selected]").text(); //獲取select被選中項的文本
• $('#select_id')[0].selectedIndex = 1; //select下拉框的第二個元素爲當前選中值
• $('input[@name=items]').get(1).checked = true; //radio單選組的第二個元素爲當前選中值

獲取值

• $("#txt").attr("value"); //文本框，文本區域
• $("#checkbox_id").attr("value"); //多選框 checkbox
• $("input@type=radio").val(); //單選組radio
• $('#sel').val(); //下拉框select

控制表單元素

• $("#txt").attr("value",''); //清空文本框，文本區域內容
• $("#txt").attr("value",'11'); //填充文本框，文本區域內容

多選框checkbox

• $("#chk1").attr("checked",''); //不打勾
• $("#chk2").attr("checked",true); //打勾

• if($("#chk1").attr('checked')==undefined); //判斷是否已經打勾

  $("input[@type=checkbox][@checked]").val();    //獲得複選框的選中的第一項的值
      $("input[@type=checkbox][@checked]").each(function()
      {
          //因爲複選框通常選中的是多個,因此能夠循環輸出
          alert($(this).val());
      }
      );

單選組radio

• $("input[@type=radio]").attr("checked",'2'); //設置value=2的項目爲當前選中項
  下拉框 select： $("#sel").attr("value",'-sel3'); //設置value=-sel3的項目爲當前選中項
• $("<optionvalue='1'>1111</option><optionvalue='2'>2222</option>").appendTo("#sel"); //添加下拉框的option
• $("#sel").empty(); //清空下拉框
• $("input@type=radio").val(); //獲得單選框的選中項的值(注意中間沒有空格)
• $("input@type=radio").attr("checked",'checked'); //設置單選框value=2的爲選中狀態(注意中間沒有空格)

遍歷option和添加、移除option

function changeShipMethod(shipping)
{
    var len = $("select[@name=ISHIPTYPE]option").length
    if(shipping.value != "CA")
    {
        $("select[@name=ISHIPTYPE]option").each(function()
            {
                if($(this).val() == 111)
                {
                    $(this).remove();
                }
             });
    }
    else
    {
        $("<option value='111'>UPSGround</option>").appendTo($("select[@name=ISHIPTYPE]"));
    }
}

取得下拉選單的選取值

• $(#testSelect option:selected').text();
• $("#testSelect").find('option:selected').text();
• $("#testSelect").val();

下拉框

//select[@name='country'] option[@selected] 表示具備name屬性，而且該屬性值爲'country'的select元素裏面的具備selected屬性的option元素；有@開頭的就表示後面跟的是屬性
var cc1 = $(".formc select[@name='country']option[@selected]").text();    //獲得下拉菜單的選中項的文本(注意中間有空格)
var cc2 = $('.formc select[@name="country"]').val();    //獲得下拉菜單的選中項的值
var cc3 = $('.formc select[@name="country"]').attr("id");    //獲得下拉菜單的選中項的ID屬性值
$("#select").empty();    //清空下拉框//$("#select").html('');
$("<optionvalue='1'>1111</option>").appendTo("#select");    //添加下拉框的option