JQuery和JS—操作select

2023年3月15日 106次阅读 来源: _Janly 
<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 为未选中
    原文作者：_Janly
    原文地址: https://www.jianshu.com/p/8faa95abe81e
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞