Javascript 基于第一个下拉列表的引导多选择动态选项

在我的页面上有两个下拉列表，一个是城市的常规选择，另一个是每个城市的社区的多选择

第一个下拉菜单上的选定选项将设置第二个下拉菜单上的选项。我已经使用常规选择，但是使用引导的multiselect，我无法获得基于选择的更改选项

这就是我现在正在尝试的代码-

var select_clone = $('<select>')
  .html($('#p-nhb option'))
  .hide()
  .insertAfter('#p-nhb');

$('#p-city')
  .change(function() {
    $('#p-nhb').html(select_clone.find('[data-val="' + this.value + '"]').clone());
$('.multi-select').multiselect('refresh');
  })
  .change();

---

我尝试使用刷新，我从中了解到了这一点，但是我无法使其工作。

不应该是您更改了多选值。我看到您使用的是p-nhb而不是multiselect。另外，为什么要触发两次更改事件

.html$'p-nhb选项' 隐藏 .在“p-nhb”之后插入； $‘p-city’ .changefunction{ $'.multi-select.htmlselect_clone.find'[data val='+this.value+']'.clone； $'.multi-select'.multiselect'refresh'； } 改变 这是一个可能有用的方法

Html:

JS:

---

如果有帮助，请告诉我。

您可以使用“隐藏”属性隐藏不可用的选项。用于设置社区之间的关系，选择城市输入的选项和值

$[name=city].changefunction{ var city=$this.val； $[name=Neighbour]选项[data city] .隐藏，隐藏 .filterfunction{ 返回$this.datacity==city； } .RemoveAttrhiden； }; 城市 选择城市 城市A B市 C市 社区 小区A1 邻里A2 小区A3 邻里B1 邻域B2 邻域C1 邻域C2

---

哈哈。这真的很简单。 您只是错过了索引页中不存在的重建。只需按住CTRL+F键即可找到它^_^

$function{ 变量选择\u克隆=$ .html$'p-nhb选项' 隐藏 .在“p-nhb”之后插入； $‘p-nhb’。多选； $'p-city'.changefunction{ $'p-nhb'.htmlselect_clone.find'[data city='+this.value+'].clone； $‘p-nhb’。多选‘重建’； }.改变； $“获取”。单击函数{ console.log'city:'+$'p-city'.val+'，neighbor:'+$'p-nhb'.val.toString； }; }; 全部的 A. B C 全部的 a1 a2 a3 a4 b1 b2 b3 b4 c1 c2 c3 补体第四成份 获得价值

---

为了更好地理解，我把原来的问题联系起来。就你的建议而言，谢谢，但它没有做任何事情。它没有做任何事情。这是用于引导多选择下拉列表。我知道如何对常规的选择下拉列表执行此操作，我的问题是引导多个。@RichJ，在您的示例中，只有p-nhb选择控件是多个。我的答案与第二个选择类型无关。我的代码段已更新，但同样有效，您可以尝试再次运行。或者你想在城市选择中使用多选？只是尝试了一下，它似乎很管用！我唯一需要更改的是js函数，其中显示data city to data val以匹配我的code.PSA-如果你要否决一个问题，那么你可能应该解释原因。

<p>
<select name="property_city" id="p-city">
  <option class="button" value="new-york-city" selected>New York City</option>
  <option class="button" value="">All</option>
  <option class="button" value="dallas-tx">Dallas, TX</option>
  <option class="button" value="las-vegas">Las Vegas, NV</option>
  <option class="button" value="los-angeles">Los Angeles, CA</option>
  <option class="button" value="miami">Miami, FL</option>
  <option class="button" value="new-york-city">New York City, NY</option>
  <option class="button" value="san-francisco">San Francisco, CA</option>
  <option class="button" value="seattle-wa">Seattle, WA</option>
</select>
</p>

<p>
<select name="property_nhb[]" id="p-nhb" multiple>
  <option class="button">All</option>
  <option data-val="los-angeles" value="beverly-hills" >Beverly Hills</option>
  <option data-val="los-angeles" value="santa-monica" >Santa Monica</option>
  <option data-val="miami" value="hialea" >Hialea</option>
  <option data-val="miami" value="little-havana">Little Havana</option>
  <option data-val="miami" value="north-miami">North Miami</option>
  <option data-val="miami" value="south-beach">South Beach</option>
  <option data-val="new-york-city" value="chelsea">Chelsea</option>
  <option data-val="new-york-city" value="harlem">Harlem</option>
  <option data-val="new-york-city" value="noho">NoHo</option>
  <option data-val="new-york-city" value="soho">SoHo</option>
</select>
</p>

var select_clone = $('<select>')
  .html($('#p-nhb option'))
  .hide()
  .insertAfter('#p-nhb');

    $('#p-city')
      .change(function() {

        $('#p-nhb').html(select_clone.find('[data-val="' + this.value + '"]').clone());
        $('#p-nhb').multiselect('refresh');
      })
      .change();