如果另一個下拉菜單選項發生更改，請重置一個下拉菜單

Question

我已經嘗試了以下解決方案： 如何使用jQuery在選擇框上設置第一個選項？

我認為這些解決方案對我不起作用，因為我的形式不同。 我有兩個單選按鈕，並根據選擇的單選按鈕顯示一個下拉列表。 默認情況下，兩個下拉菜單都是隱藏的（ style="display:none" ）。 為了顯示和隱藏下拉菜單，我使用以下簡單代碼：

$("#contactRadioButton").click(function () {
    $("#contactDropdown").show();
    $("#companyDropdown").hide();
});

$("#companyRadioButton").click(function () {
    $("#companyDropdown").show();
    $("#contactDropdown").hide();
});

我嘗試過的代碼示例之一：

$('#contactSelect').change(function(){
    $('#companySelect').val('');
});


$('#companySelect').change(function(){
    $('#contactSelect').val('');
});

但是我需要一個下拉列表來提交一個值。 現在，我可以單擊contact radio button ，然后在下拉列表中選擇一個值。 然后，我可以選擇company radio button ，另一個下拉菜單將顯示，並且我可以選擇一個值。 然后，兩個下拉菜單都將有一個值。

PS。 我正在使用bootstrap和bootstrap select。 不知道這是否與它有關。

我的完整表單代碼（單選按鈕和下拉列表）：

<div class="form-group">
    <label class="control-label">Add contact or company?</label>
    <div>
        <div class="radio-custom radio-success radio-inline">
            <input id="contactRadioButton" name="contact_relatie" type="radio" value="1">
            <label for="contactRadioButton">Contact</label>
        </div>
        <div class="radio-custom radio-success radio-inline">
            <input id="companyRadioButton" name="contact_relatie" type="radio" value="1">
            <label for="companyRadioButton">Company</label>
        </div>
    </div>
</div>

<div class="form-group " id="contactDropdown" style="display:none">
    <label for="name">Contact:</label>
    <select class="form-control" data-plugin="selectpicker" data-live-search="true" id="contactSelect" name="contact_id"><option value="" selected="selected">-- Select Contact --</option> // rest of options..</select>
</div>

<div class="form-group " id="companyDropdown" style="display:none">
    <label for="name">Company:</label>
    <select class="form-control" data-plugin="selectpicker" data-live-search="true" id="companySelect" name="relation_id"><option value="" selected="selected">-- Select Company --</option> // rest of options..</select>
</div>

Answer 1

JS

$('#contactSelect').change(function(){
     $('#companySelect option:first').prop('selected', 'selected');
});


$('#companySelect').change(function(){
    $('#contactSelect option:first').prop('selected', 'selected');
});

HTML

<div class="form-group " id="contactDropdown" style="display:none">
    <label for="name">Contact:</label>
    <select class="form-control" data-plugin="selectpicker" data-live-search="true" id="contactSelect" name="contact_id"><option value="" selected="selected">-- Select Contact --</option> // rest of options..</select>
</div>

<div class="form-group " id="companyDropdown" style="display:none">
    <label for="name">Company:</label>
    <select class="form-control" data-plugin="selectpicker" data-live-search="true" id="companySelect" name="relation_id"><option value="" selected="selected">-- Select Company --</option> // rest of options..</select>
</div>

Answer 2

由於我的代碼在后台運行，因此也通過使用它來解決它：

$('#mySelect').selectpicker('render');

https://github.com/silviomoreto/bootstrap-select/issues/84

因此，對於使用引導程序選擇的任何人，如果遇到與我相同的問題，請使用上面的代碼。