使用 html + JS 填充选择 [英] Populated Select with html + JS

问题描述

我有这个小提琴:https://jsfiddle.net/Ardee12/tL643rjq/3/我的问题是，在我从第一个选择中选择一个选项后，我总是在第二个选择中的第三个选择中获得相同的选项(反之亦然).我需要坚持他们自己的选择(第二个和第三个选择)，但仍然有来自他们的rel"的填充函数.属性.任何人都可以帮我吗?

I have this Fiddle : https://jsfiddle.net/Ardee12/tL643rjq/3/ My problem is, I always get the same options at the third select from second select (vice versa), after I select an option from the first one. I need to stick for their own option (second and third select), but still have the populated function from their "rel" attribute. Can anyone please help me?

$(document).ready(function () {
  $(".mainSelect").change(function() {
    if ($(this).data('options') === undefined) {
      $(this).data('options', $('.kidSelect option').clone());
    }
    var rel = this.options[this.selectedIndex].getAttribute('rel');
    var options = $(this).data('options').filter('[rel=' + rel + ']');
    $('.kidSelect').html(options);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
  <option rel="1">Fruit</option>
  <option rel="2">Animal</option>
  <option rel="3">Bird</option>
  <option rel="4">Car</option>
</select>

<select class="kidSelect">
  <option rel="1">Banana</option>
  <option rel="1">Apple</option>
  <option rel="1">Orange</option>
  <option rel="2">Wolf</option>
  <option rel="2">Fox</option>
  <option rel="2">Bear</option>
  <option rel="3">Eagle</option>
  <option rel="3">Hawk</option>
  <option rel="4">BWM</option>
</select>

<select class="kidSelect">
  <option rel="1">AAAAA</option>
  <option rel="2">BBBBB</option>
  <option rel="3">CCCCC</option>
</select>

推荐答案

您需要单独对待每个 KidSelect.在开始时循环遍历它们中的每一个，并在每个实例中存储它们自己的选项的副本.

You need to treat each of the kidSelect individually. Loop through each of them at the beginning and store a clone of their own options in each instance.

然后当你改变主选择时，分别过滤每一组

Then when you change main select, filter each set separately

  // store a clone of each kidSelect options on page load
  $('.kidSelect').each(function() {
    $(this).data('options', $(this).children().clone());
  });

  $(".mainSelect").change(function() {

    var rel = this.options[this.selectedIndex].getAttribute('rel');

    // filter each kids options and set in place
    $('.kidSelect').html(function() {
      return $(this).data('options').filter('[rel=' + rel + ']').clone();          
    });
      // trigger the change on page load also to do initial filtering
  }).change();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<select class="mainSelect">
  <option rel="1">Fruit</option>
  <option rel="2">Animal</option>
  <option rel="3">Bird</option>
  <option rel="4">Car</option>
</select>

<select class="kidSelect">
  <option rel="1">Banana</option>
  <option rel="1">Apple</option>
  <option rel="1">Orange</option>
  <option rel="2">Wolf</option>
  <option rel="2">Fox</option>
  <option rel="2">Bear</option>
  <option rel="3">Eagle</option>
  <option rel="3">Hawk</option>
  <option rel="4">BWM</option>
</select>

<select class="kidSelect">
  <option rel="1">AAAAA</option>
  <option rel="2">BBBBB</option>
  <option rel="3">CCCCC</option>
</select>

这篇关于使用 html + JS 填充选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！