jQuery技术

[jQuery][轉] jQuery對select tag的操作 @ 碎碎念 :: 隨意窩 Xui

字号+ 作者:H5之家 来源:H5之家 2016-02-23 14:52 我要评论( )

轉自nbsp;http://kevyu.blogspot.com/2008/03/jqueryselect.html --- 補充一下 使某option變為selected$(#select1).children().each(function(){nbsp;nbsp;nbsp;

轉自 

---

補充一下

使某option變為selected
$("#select1").children().each(function(){
    if ($(this).text()=="option you want"){
        //jQuery給法
        $(this).attr("selected", "true"); //或是給"selected"也可

        //javascript給法
        this.selected = true; 
    }
});

 

 

其中

//jQuery給法
$(this).attr("selected", "true"); //或是給selected也可

這是錯的,在FIREFOX可以跑,但是在CHROME就無效了

正確應該是:

//jQuery給法
$(this).attr("selected", true); //或是給"selected"也可

---

jQuery對select tag的操作

  • get
  • 取出選擇的值
    $("select#Club").val();
    $('select#Club option:selected').text();
    以上2方法在單選時相同,但複選時,
    val()會用逗號分開 ex. AA, BB
    text()不會 ex. AABB
  • 取出array
    $("select#Club").children("[@selected]").each(function(){
        alert(this.text());
    });
  • set
  • 使某option變為selected
    $("#select1").children().each(function(){
        if ($(this).text()=="option you want"){
            //jQuery給法
            $(this).attr("selected", true); //或是給"selected"也可

            //javascript給法
            this.selected = true;
        }
    });
  • 讓新增的option直接為selected
    var option = jQuery("new option");
    $('select#Club').append(option);
    $(option).attr("selected", true); //讓option為selected
    $('select#Club').trigger("change"); //最後要觸發select的change事件
  • select下拉框的第二個元素為當前選中值
    $('select#Club')[0].selectedIndex = 1;//不知為何要加[0]
    =========== K. T. Chen 提到 ==========================
    在$("")加[0]的意思是把jQuery物件轉為DOM物件。這樣子jQuery物件才能使用DOM底下的selectedIndex方法。
  • event
    //改變時的事件
    $("select#Club").change(function(){ //事件發生
        //一次印出
        alert($(this).val());

        //印出選到多個值
        jQuery('option:selected', this).each(function(){
            alert(this.value);
        });
    });
  • 移除
    removeOption(index/value/regex[, selectedOnly])
    $('select#Clubs option:selected').remove();


  • //純javascirpt
    <select onchange="alert('Index: ' + this.selectedIndex
    + '\nValue: ' + this.options[this.selectedIndex].value)">
    ...
    </select>

    參考

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 7个有用的jQuery小技巧

      7个有用的jQuery小技巧

      2016-02-26 13:02

    • jQuery制作select双向选择列表

      jQuery制作select双向选择列表

      2016-02-26 11:00

    • 全面详细的jQuery常见开发技巧手册

      全面详细的jQuery常见开发技巧手册

      2016-02-26 10:02

    • 强大的jQuery移动插件Top 10

      强大的jQuery移动插件Top 10

      2016-02-25 09:05

    网友点评