jQuery代码的优化

Question

我在这里尝试检测 option[name='admin'] 的选择状态，如果它被选择了，那么我就选中相应的复选框，否则我就取消勾选它。

这段代码有更好的优化方法吗？

$("select option[name='admin']:selected").select(function () {
    $(".gestionSupervision").prop('checked', true);
});

$("select option[name='sei']:selected").select(function () {
    $(".gestionSupervision").prop('checked', false);
});

HTML:

<select name="role" id="role" class="form-control" disabled>
    <option value="admin">Administrateur</option>
    <option value="sei">Superviseur</option>
</select>

非常感谢！

- Lucie kulza

Answer 1

我认为你需要使用change事件。

$("#role").change(function () {
    $(".gestionSupervision").prop('checked', $(this).find('option[value="admin"]').is(':selected'));
}).change();

演示：Fiddle

（保留HTML）

- Arun P Johny

---

非常感谢您的回复，我已经点赞了！ - Lucie kulza

Answer 2

您可以使用以下代码更容易理解：

您可以使用以下代码更容易理解：

$('select#role').on('change', function (e) {
    var optionSelected = $("option:selected", this),
        selectedVal = this.value;

    if(selectedVal == "admin") {
        $(".gestionSupervision").prop('checked', true);
    } else {
        $(".gestionSupervision").prop('checked', false);
    }
}).change();

Fiddle演示

或者您可以将上述代码缩短为：

$('select#role').on('change', function (e) {
    var selectedVal = $(this).find('option:selected').val();
    $(".gestionSupervision").prop('checked', selectedVal == "admin");
}).change();

小提琴示范

（保留html）

- Felix

---

非常感谢您的回复，我已给它点赞！ - Lucie kulza

Answer 3

可能是这样的：

$("select option:selected").select(function () {
    status = (this.val() == 'sei')
    $(".gestionSupervision").prop('checked', status);
});

无需重复整个过程，只需更改名称/布尔值即可。

- Marc B