HTML 009 select_jquery操作下拉框select

 

取值问题

    <select id="selector">
        <option value="1">选项一</option>
        <option value="2">选项二</option>
        <option value="3">选项三</option>
        <option value="4">选项四</option>
    </select>

1.获取当前选中项的text和value

    $("#selector").find("option:selected").text();
    $("#selector").find("option:selected").val();

2.获取当前选中的索引值（从0开始）

$("#selector").get(0).selectedIndex;

3.获取第一项（最小）和最后一项（最大）的text

    $("#selector option:last").text();
    $("#selector option:first").text();

 

更改和设置选中状态

1.改变select的选中，执行该语句后将第0个改为被选中状态，这里eq(i)，i为索引值

    $("#selector").each(function(){
        $(this).find("option").eq(0).prop("selected",true)
    });

2.为select添加事件，当选择其中一项时触发事件

    $('#selector').change(function (e) {
       alert(1243);
    });

3.设置select索引值为1的项选中

    $("#selector").get(0).selectedIndex = 1;

4.设置select的value值为’1’的项选中

　　$("#selector option[value='1']").prop("selected", true);

添加/删除select的option项：

1.为select追加一个option(下拉项)，在末尾添加

    $("#selector").append("<option value='5'>选项五</option>");

2.为select追加一个option(下拉项)，在起始添加

    $("#selector").prepend("<option value='5'>选项五</option>");

3.删除select中最后一个option

    $("#selector option:last").remove();

4.删除select中value='3’的option

     $("#selector option[value='3']").remove();

 

总结

以上是如意编程网为你收集整理的HTML 009 select_jquery操作下拉框select的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得如意编程网网站内容还不错，欢迎将如意编程网推荐给好友。