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>

重置具有所选选项的选择输入

1 个答案: