根据另一个 select 选项更改 bootstrap multiselect 值，使用 jquery

Question

我有一个使用 HTML 和 JS 创建的简单表单。有3个select元素，第二个和第三个select元素的选项是基于第一个select选项的。 HTML 代码如下。

<div class="d-flex flex-column">
    <label>City</label>
    <select name="city" class="city" id="city-selection">
        <option selected="selected" value="">Select City</option>
        <option value="City 1">City 1</option>
        <option value="City 2">City 2</option>
        <option value="City 3">City 3</option>
        <option value="City 4">City 4</option>
        <option value="City 5">City 5</option>
        <option value="City 6">City 6</option>
        <option value="City 7">City 7</option>
    </select>
</div>
<div class="d-flex flex-column">
    <label>Hotel</label>
    <select name="hotel" class="hotel" id="hotel-selection">
        <option selected="selected" value="">Select Hotel</option>
    </select>
</div>
<div class="d-flex flex-column">
    <label>Tours</label>
    <select name="tour" class="tour" id="tour-selection" multiple="multiple">
        <option selected="selected" value="">Select Tours</option>
</select>
</div>

第一个(#city-selection)和第二个(#hotel-selection) select 元素只是普通元素。但是我将第三个(#tour-selecton) select 元素更改为Bootstrap multi-select 元素。所以JS部分在下面。

//City 1 options
var city1Hotels = '<option selected="selected" value="">Select Hotel</option><option value="City 1 Hotel 1">City 1 Hotel 1</option>';

//City 2 options
var city2Hotels = '<option selected="selected" value="">Select Hotel</option><option value="City 2 Hotel 1">City 2 Hotel 1</option>';
var city2Tours = '<option selected="selected" value="">Select Tours</option><option value="City 2 Tour 1">City 2 Tour 1</option><option value="City 2 Tour 2">City 2 Tour 2</option>';

var cityS = $("select#city-selection");
var hotelS = $("select#hotel-selection");
var tourS = $("select#tour-selection");

//changing second and third select elements options based on first select element
$(document).ready(function(){
    cityS.on('change',function(){
        if($(this).val()=="City 1"){
            hotelS.html(city1Hotels); //for hotel results based on a city

        }
        else if($(this).val()=="City 2"){
            hotelS.html(city2Hotels); //for hotel results based on a city
            tourS.html(city2Tours); //for tour results based on a city           
        }
    });
});

//set multiselect on third select element
$(function() {
    "use strict";
    $(document).ready(function() {
        $('#tour-selection').multiselect({
            includeSelectAllOption: false,});
    });  
});

问题

当我 select 来自#city-selection 的城市时，#hotel-selection 会根据城市条目正确显示结果。但是当谈到#tour-selection 时，当我 select 访问一个城市时，它并没有向我显示游览。但是，如果我删除 multi-select 函数，它会显示所有基于城市的游览。但是此时用户只能 select 一个选项。所以这不是我的本意，我认为是 multi-select 的问题。目前，我已经使用 if-else 来根据城市更改决策。如果有人可以帮助我，我将不胜感激！

更多信息：

我使用此文档添加 bootstrap multi-select。 https://davidstutz.github.io/bootstrap-multiselect/
当我使用 HTML 将自定义选项添加到第三个（#tour-selection）select 元素时，multi-select 功能有效适当地。但是基于决策的 selection 仍然不起作用。

Answer 1

我已经编辑了你的 javascript 代码，使用对象数组来设置城市、酒店和旅游的数据，使它们动态呈现选项

Html

  <div class="d-flex flex-column">
    <label>City</label>
    <select name="city" class="city" id="city-selection">
      <option selected="selected" value="">Select City</option>
    </select>
  </div>
  <div class="d-flex flex-column">
    <label>Hotel</label>
    <select name="hotel" class="hotel" id="hotel-selection">
      <option selected="selected" value="">Select Hotel</option>
    </select>
  </div>
  <div class="d-flex flex-column">
    <label>Tours</label>
    <select name="tour" class="tour" id="tour-selection" multiple="multiple">
      <option selected="selected" value="">Select Tours</option>
    </select>
  </div>

Javascript

  //City Options
  var cities = ["city-1", "city-2"];
  // Hotel options based on cities
  var hotels = [
    {
      city: "city-1",
      hotels: ["hotel-1", "hotel-2"],
    },
    {
      city: "city-2",
      hotels: ["hotel-1", "hotel-2"],
    },
  ];
  // Tour options based on Cities
  var tours = [
    {
      city: "city-1",
      tours: ["tour-1", "tour-2"],
    },
    {
      city: "city-2",
      tours: ["tour-1", "tour-2"],
    },
  ];

  var citySelect = $("select#city-selection");
  var hotelSelect = $("select#hotel-selection");
  var tourSelect = $("select#tour-selection");

  // render city options
  for (i in cities) {
    if (i == 0) {
      // first option with "Select City" as the selected option
      citySelect.html(
        `<option selected="selected" value="">Select City</option>`
      );
      citySelect.append(
        `<option value="${cities[i]}">${cities[i]}</option>`
      );
    } else {
      // the rest of the options
      citySelect.append(
        `<option value="${cities[i]}">${cities[i]}</option>`
      );
    }
  }

  // changing both hotel options and tour options based on selected city
  $(document).ready(function () {
    citySelect.on("change", function () {
      // render hotel options based on selected city
      for (i in hotels) {
        if ($(this).val() == hotels[i]["city"]) {
          console.log(hotels[i]["city"]);
          // first option
          hotelSelect.html(
            `<option selected="selected" value="">Select Hotels</option>`
          );
          hotels[i]["hotels"].forEach((hotel) => {
            hotelSelect.append(
              `<option value="${hotels[i]["city"]}-${hotel}">${hotels[i]["city"]}-${hotel}</option>`
            );
          });
        }
      }

      // render tour options based on selected city
      for (i in tours) {
        if ($(this).val() == tours[i]["city"]) {
          console.log(tours[i]["city"]);
          // first option
          tourSelect.html(
            `<option selected="selected" value="">Select tours</option>`
          );
          tours[i]["tours"].forEach((hotel) => {
            tourSelect.append(
              `<option value="${tours[i]["city"]}-${hotel}">${tours[i]["city"]}-${hotel}</option>`
            );
          });
        }
      }
    });

    tourSelect.on("change", function () {
      console.log($(this).val())
    })
  });

Answer 2

最后我发现我无法使用 Bootstrap multi-select。因为它不会让自定义 JS 代码替换 select 元素中的当前 options。否则 bootstrap-multiselect 是在 select 元素中创建复选框的好方法。可能有一种方法可以覆盖它。但我无法找到一种方法来做到这一点。但是，我找到了另一种方法来满足我的需求，而无需使用 Bootstrap multi-select 和 select 元素。此答案包含多个堆栈溢出答案的几行代码。

这些答案是，

How to create checkbox inside dropdown?

HTML

首先，我将 select 元素替换为 ul 列表元素，如下面的代码所示。

<div class="d-flex flex-column">
    <label>City</label>
    <select name="city" class="city" id="city-selection">
        <option selected="selected" value="">Select City</option>
        <option value="City 1">City 1</option>
        <option value="City 2">City 2</option>
        <option value="City 3">City 3</option>
        <option value="City 4">City 4</option>
        <option value="City 5">City 5</option>
        <option value="City 6">City 6</option>
        <option value="City 7">City 7</option>
    </select>
</div>
<div class="d-flex flex-column">
    <label>Hotel</label>
    <select name="hotel" class="hotel" id="hotel-selection">
        <option selected="selected" value="">Select Hotel</option>
    </select>
</div>
<div class="d-flex flex-column">
    <div id="list1" class="dropdown-check-list">
        <label>Select Tours</label>
        <span class="anchor">Select Tours</span>
        <ul class="tours" id="tour-list">
        </ul>
    </div>
</div>

CSS

CSS 下拉菜单代码。

.dropdown-check-list {
    display: inline-block;
}

.dropdown-check-list .anchor {
    position: relative;
    cursor: pointer;
    display: inline-block;
    padding: 5px 50px 5px 10px;
    border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
    position: absolute;
    content: "";
    border-left: 2px solid black;
    border-top: 2px solid black;
    padding: 5px;
    right: 10px;
    top: 20%;
    -moz-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
    right: 8px;
    top: 21%;
}

.dropdown-check-list ul.tours {
    padding: 2px;
    display: none;
    margin: 0;
    border: 1px solid #ccc;
    border-top: none;
}

.dropdown-check-list ul.tours li {
    list-style: none;
}

.dropdown-check-list.visible .anchor {
    color: #0094ff;
}

.dropdown-check-list.visible .tours {
    display: block;
}

JS 和 JQuery

var city1Tours = ["c1 Tour1","c1 Tour2"];
var city2Tours = ["c2 Tour1","c2 Tour2"];

var city1Hotels = '<option selected="selected" value="">Select Hotel</option><option value="City 1 Hotel 1">City 1 Hotel 1</option>';
var city2Hotels = '<option selected="selected" value="">Select Hotel</option><option value="City 2 Hotel 1">City 1 Hotel 1</option>';

//tour list dropdown js code
var checkList = document.getElementById('list1');
checkList.getElementsByClassName('anchor')[0].onclick = function(evt) {
if (checkList.classList.contains('visible'))
    checkList.classList.remove('visible');
else
    checkList.classList.add('visible');
}

//hotel selection based on user city decision js code
$(document).ready(function(){
    cityS.on('change',function(){
    if($(this).val()=="City 1"){
        hotelS.html(city1Hotels);
        //Tour selection based on the city
        $("#tour-list").empty();//This line clears current li contents
        $.each(city1Tours, function( key, value ) {
            $('#tour-list').append('<li>' + '<input type="checkbox" />' + value + '</li>');
        });

    }else if($(this).val()=="City 2"){
        hotelS.html(city2Hotels);
        //Tour selection based on the city
        $("#tour-list").empty();//This line clears current li contents
        $.each(city2Tours, function( key, value ) {
            $('#tour-list').append('<li>' + '<input type="checkbox" />' + value + '</li>');
        });
      }
   });
});

希望这个回答对以后的人有所帮助。

根据另一个 select 选项更改 bootstrap multiselect 值，使用 jquery

Change bootstrap multiselect values based on another select options, using jquery

html

javascript

jquery

Html

Javascript

HTML

CSS

JS 和 JQuery