Question

下面是我的jQuery。每次<select>更改值时，它都会显示另一个与<select>具有相同值的<option>。

$('#mode').on('change', function () {
    var value = $("#mode option:selected").val();
    $('.hide').slideUp('fast');
    $('#' + value).show('slow');
});

.hide {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
    <label class="control-label">Mode</label>
    <select class="input-large m-wrap" name="mode" id="mode" required>
        <option value=""></option>
        <option value="general">General Knowledge</option>
        <option value="preparatory">Preparatory Exam</option>
    </select>
</div>
<!-- MODULES -->
<div class=" hide" id="general">
    <br>
    <label class="control-label">Module</label>
    <select class="input-large m-wrap" name="module" id="sub">
        <option value=""></option>
        <option value="Module 1">Module 1</option>
        <option value="Module 2">Module 2</option>
    </select>
</div>
<!-- A1 to Asomething -->
<div class=" hide" id="preparatory">
    <br>
    <label class="control-label">Exam</label>
    <select class="input-large m-wrap" name="exam" id="sub">
        <option value=""></option>
        <option value="A1">A1</option>
        <option value="A2">A2</option>
    </select>
</div>

问题是当我已经在模块中选择了一个选项但后来决定改为考试时。模块中选择的选项保持不变。

如何将现在隐藏的选项的值设置为none？我已将id="sub"添加到两个<select>以使用以下行""将值设置为$('#sub').val() = "";，但它似乎无效。

编辑：我尝试将id="sub"设置为id="sub1"和id="sub2"然后使用

$('#sub1').val() = "";
$('#sub2').val() = "";

但仍然没有运气。

Answer 1

您可以在find()中select .hide元素并设置其val()。试试这个：

$('.hide').slideUp('fast').find('select').val('');

另请注意，您在不同元素上设置了重复的id属性 - 这是无效的，因为id在页面范围内必须是唯一的。

工作片段：

$('#mode').on('change', function () {
    var value = $("#mode option:selected").val();
    $('.hide').slideUp('fast').find('select').val('');
    $('#' + value).show('slow');
});

.hide {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="">
    <label class="control-label">Mode</label>
    <select class="input-large m-wrap" name="mode" id="mode" required>
        <option value=""></option>
        <option value="general">General Knowledge</option>
        <option value="preparatory">Preparatory Exam</option>
    </select>
</div>
<!-- MODULES -->
<div class=" hide" id="general">
    <br>
    <label class="control-label">Module</label>
    <select class="input-large m-wrap" name="module" id="sub">
        <option value=""></option>
        <option value="Module 1">Module 1</option>
        <option value="Module 2">Module 2</option>
    </select>
</div>
<!-- A1 to Asomething -->
<div class=" hide" id="preparatory">
    <br>
    <label class="control-label">Exam</label>
    <select class="input-large m-wrap" name="exam" id="sub">
        <option value=""></option>
        <option value="A1">A1</option>
        <option value="A2">A2</option>
    </select>
</div>

jQuery set select选择none

1 个答案: