JQuery和JS—操作select

作者: _Janly | 来源:发表于2018-04-03 14:33 被阅读22次
    <select name="sort" id="sort">
        <option value="desc">按日期倒序</option>
        <option value="asc">按日期正序</option>
    </select>
    

    JQuery部分

    1.根据value设置选中

    $("#sort").val("asc")
    

    2.根据text设置选中

    $("#sort").find("option[text=按日期正序]").attr("selected",true);
    

    3.获取选中项的value

    $("#sort").val()
    

    4.获取选中项的text

    $("#sort").find("option:selected").text();
    或
    $("#sort option:selected").text();
    

    5.改变选项,进行相应操作(多用于级联)

    $("#sort").change(function(){
          //   操作
    })
    

    6.判断是否被选中

    $("option[value=desc]").is(':checked') //true为被选中,false未被选中
    $("option[value=desc]").attr('selected')!=undefined  //true为被选中,false未被选中
    

    7.获取select选中的索引

    $("#sort").get(0).selectedIndex  //下表从0开始
    

    8.添加option

    $("#sort").append("<option  value=" + value + ">" + text + "</option>");
    
    • 二、JS部分

    var   mySelect = document.getElementById("sort");//定位id(获取select)
    var   index =mySelect.selectedIndex;// 选中索引(选取select中option选中的第几个)
    var   text =mySelect.options[index].text; // 选中文本
    var   value =mySelect.options[index].value; // 选中值
    mySelect.options[index].selected // 判断select中的某个option是否选中   true为选中   false 为未选中
    

    相关文章

      网友评论

        本文标题:JQuery和JS—操作select

        本文链接:https://www.haomeiwen.com/subject/znyqhftx.html