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选择。不确定这是否与它有任何关系。

我的完整表单代码（单选按钮和下拉列表）：

<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

因此，对于使用引导程序选择的任何人，如果您遇到与我相同的问题，请使用上面的代码。

如果另一个下拉选项更改，则重置一个下拉列表

2 个答案: