重置一個下拉菜單，如果另一個下拉選擇改變

Question

我曾嘗試以下解決方案：How to set the first option on a select box using 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

通過使用這個問題，以及解決它，因爲我的代碼工作behi第二場景：

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

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

因此，對於使用引導選擇任何人，如果你正在運行到同一個問題，因爲我用上面的代碼。