如果另一个下拉选择更改,则重置一个下拉
Reset one dropdown if another dropdown selection changes
我试过这些解决方案:How to set the first option on a select box using jQuery?
我认为这些解决方案对我不起作用,因为我的表格不同。我有两个单选按钮,根据select编辑了哪个单选按钮,会显示一个下拉菜单。默认情况下,两个下拉菜单都是隐藏的 (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
,然后单击 select 下拉列表中的一个值。然后,我可以 select company radio button
并显示另一个下拉列表,我可以 select 一个值。然后,两个下拉菜单都会有一个值。
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>
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>
也通过使用它解决了它,因为我的代码在幕后工作:
$('#mySelect').selectpicker('render');
https://github.com/silviomoreto/bootstrap-select/issues/84
因此,对于使用 bootstrap select 的任何人,如果您 运行 遇到与我相同的问题,请使用上面的代码。
我试过这些解决方案:How to set the first option on a select box using jQuery?
我认为这些解决方案对我不起作用,因为我的表格不同。我有两个单选按钮,根据select编辑了哪个单选按钮,会显示一个下拉菜单。默认情况下,两个下拉菜单都是隐藏的 (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
,然后单击 select 下拉列表中的一个值。然后,我可以 select company radio button
并显示另一个下拉列表,我可以 select 一个值。然后,两个下拉菜单都会有一个值。
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>
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>
也通过使用它解决了它,因为我的代码在幕后工作:
$('#mySelect').selectpicker('render');
https://github.com/silviomoreto/bootstrap-select/issues/84
因此,对于使用 bootstrap select 的任何人,如果您 运行 遇到与我相同的问题,请使用上面的代码。