Bootstrap 通过主下拉 Javascript 打破多个子下拉列表

Question

我做了一些 Jquery 来通过主下拉菜单更改多个子下拉菜单。

Image here

我遇到的问题是，一旦我添加引导样式“表单控制选择选择器”，它就会中断，因为它将代码转换为不同的格式。

Jquery 通过主下拉菜单更改多个子下拉菜单的代码如下。 I would also like to add a save to save the relevant children when the relevant main dropdown has been selected:

<select class="search_top_options">
    <option class="saleButton">property sales</option>
    <option class="rentalButton">long lets</option>
</select>

$('.saleButton').click(function () {
      $('.rentalSearch').hide();
      $('.saleButton').removeClass("search_top_tab").addClass("search_top_tab_selected");
      $('.rentalButton').removeClass("search_top_tab_selected").addClass("search_top_tab");
      $('.saleSearch').fadeIn('fast');
  });
  $('.rentalButton').click(function () {
      $('.saleSearch').hide();
      $('.rentalButton').removeClass("search_top_tab").addClass("search_top_tab_selected");
      $('.saleButton').removeClass("search_top_tab_selected").addClass("search_top_tab");
      $('.rentalSearch').fadeIn('fast');
  });

我该怎么做？屏幕截图下方的 bootstrap sin 格式化的代码（不会让我将其附加到这张票上）：

image here of broken bootstrap select code

Answer 1

您面临的问题是，您正在收听的“点击”事件不适用于选项。

在您的情况下，您可以尝试获取您选择的值。提供的代码与您的代码略有不同，但应该会提示您如何解决问题。

<select class="search_top_options">
  <option disabled selected> -- select an option -- </option>
  <option class="saleButton">property sales</option>
  <option class="rentalButton">long lets</option>
</select>

<div class="saleSearch">
saleSearch content
</div>

<div class="rentalSearch">
rentalSearch content
</div>

$('.search_top_options').on('change', function() {
    $(this).find('option:not(selected)').hide();
  if ($(this).val() == 'property sales') {
    $('.rentalSearch').hide();
    $('.saleSearch').fadeIn();
  } else if ($(this).val() == 'long lets') {
    $('.saleSearch').hide();
    $('.rentalSearch').fadeIn();
  }
});

.rentalSearch {
  display: none;
}

https://jsfiddle.net/tw0g5jeh/