jquery操作select方法汇总

下面是详细的“jquery操作select方法汇总”攻略。

1. 操作select标签的属性

1.1 设置或获取select标签的value属性

• 设置

$("select").val("value2");

• 获取

var selectedValue = $("select").val();

1.2 设置或获取select标签的disabled属性

• 设置

$("select").prop("disabled", true);

• 获取

var isDisabled = $("select").prop("disabled");

1.3 设置或获取select标签的readonly属性

• 设置

$("select").prop("readonly", true);

• 获取

var isReadonly = $("select").prop("readonly");

2. 操作select标签中的选项

2.1 选中指定选项

$("select option[value='value2']").prop("selected", true);

2.2 取消所有选中的选项

$("select option:selected").prop("selected", false);

2.3 获取所有选中的选项的value值

var selectedValues = $("select").val();

2.4 添加选项

$("select").append("<option value='value3'>Option3</option>");

2.5 删除指定选项

$("select option[value='value3']").remove();

示例说明

示例1：根据选中的选项的值展示对应的内容

HTML：

<select id="select">
    <option value="">请选择</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
    <option value="3">选项3</option>
</select>
<div id="content"></div>

JS：

$("select").change(function() {
    var selectedValue = $(this).val();

    switch(selectedValue) {
        case "1":
            $("#content").text("选项1对应的内容");
            break;
        case "2":
            $("#content").text("选项2对应的内容");
            break;
        case "3":
            $("#content").text("选项3对应的内容");
            break;
        default:
            $("#content").text("");
            break;
    }
});

上面的示例展示了如何根据选中的选项来展示对应的内容。当选项改变时，会触发select的change事件，通过获取选中的值，然后根据不同的值展示不同的内容。

示例2：动态添加选项，并选中添加的选项

HTML：

<select id="select">
    <option value="">请选择</option>
    <option value="1">选项1</option>
    <option value="2">选项2</option>
</select>
<button id="addOption">添加选项3</button>

JS：

$("#addOption").click(function() {
    // 添加选项
    $("select").append("<option value='3'>选项3</option>");

    // 选中添加的选项
    $("select option[value='3']").prop("selected", true);
});

上面的示例展示了如何动态添加选项，并且在添加完选项后自动选中添加的选项。当按钮点击时，会添加一个value为3文本为“选项3”的选项，然后通过选中添加的选项的value值来达到选中添加的选项的效果。