javascript - 重置具有选定选项的选择输入

Question

我有以下代码是通过另一个已回答的问题提供的 here .

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('change', '#no_cage', function() {
    if(this.checked) {
        document.getElementById("client").reset();
        this.checked = true;
    }
});
</script>
<form id="client">
    <input type="text">
    <input id="no_cage" type="checkbox" value="1"> CLEAR
</form>

我现在想按照以下方式包含一个选择输入:

<select name="cage_labor">
   <option value="Select Labor" <?php if ($cage_labor=="Select Labor") echo "selected"; ?>>Select Labor</option>
   <option value="Non Union"  <?php if ($cage_labor=="Non Union") echo "selected"; ?>>Non Union</option>
   <option value="Union"  <?php if ($cage_labor=="Union") echo "selected"; ?>>Union</option>
</select>

我希望重置表单复选框忽略所选选项并默认为“选择劳动力”。有什么想法可以实现吗？

谢谢，

约翰

Answer 1

我对你真正想要的东西感到困惑。

如果您想忽略属性 selected 并设置为 defaultValue:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('change', '#no_cage', function() {
    if(this.checked) {
        document.getElementById("client").reset();
        this.checked = true;
        $("#cage_labor").prop("selectedIndex",0);
    }
});
</script>
<form id="client">
    <input type="text">
    <select name="cage_labor" id="cage_labor">
        <option value="Select Labor">Select Labor</option>
        <option value="Non Union" selected>Non Union</option>
        <option value="Union">Union</option>
    </select>
    <input id="no_cage" type="checkbox" value="1"> CLEAR
</form>

如果你想忽略整个选择输入:

当表单重置时，它会重置所有内容。就像您完成 this.checked = true 将值重新分配给复选框一样；为了让它看起来像重置按钮忽略了选择，您所要做的就是将该选择输入的值分配给变量，并在表单重置完成后重新分配值以选择输入。像这样:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('change', '#no_cage', function() {
    if(this.checked) {
        var value = $("#cage_labor").prop("selectedIndex");
        document.getElementById("client").reset();
        this.checked = true;
        $("#cage_labor").prop("selectedIndex",value);
    }
});
</script>
<form id="client">
    <input type="text">
    <select name="cage_labor" id="cage_labor">
        <option value="Select Labor">Select Labor</option>
        <option value="Non Union" selected>Non Union</option>
        <option value="Union">Union</option>
    </select>
    <input id="no_cage" type="checkbox" value="1"> CLEAR
</form>