重置一个下拉菜单，如果另一个下拉选择改变

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

因此，对于使用引导选择任何人，如果你正在运行到同一个问题，因为我用上面的代码。