jQuery 设置选择不选择

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>

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

如何将现在隐藏的选择的值设置为无？我添加了id="sub"到两个<select> s 将值设置为 ""使用以下行 $('#sub').val() = "";但似乎不起作用。

编辑:我尝试设置 id="sub"至id="sub1"和id="sub2"然后使用

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

但还是没有运气。

Answer 1

您可以find() .hide 中的select 元素并设置其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>