根据第一个菜单中的用户选择在第二个菜单中显示选项

Question

我正在尝试创建一个界面，它有两个并排的列表。在开始时，左边的选项将包含不同的选项，右边的选项将为空白。下面的代码创建下拉框，但我希望它是一个带有滚动条的框，以便用户可以选择多个选项。

一旦用户在左侧选择一个选项，与其选择相关的预定义选项列表将出现在右侧的list.If中--用户在左侧菜单中选择多个选项，所有与其选择相关的预定义选项都将出现在右侧菜单中。

，这是我使用小提琴的代码， 在这里找到的。

<select name="select1" id="select1">
<option value="1">Fruit</option>
<option value="2">Animal</option>
<option value="3">Car</option>
</select>

<select name="select2" id="select2">
<option value="1">Banana</option>
<option value="1">Apple</option>
<option value="1">Orange</option>
<option value="2">Wolf</option>
<option value="2">Fox</option>
<option value="2">Bear</option>
<option value="2">Eagle</option>
<option value="3">BMW<option>
</select>

jQuery：

 $("#select1").change(function() { 
    if($(this).data('options') == undefined){
        /*Taking an array of all options-2 and kind of embedding it on the select1*/
        $(this).data('options',$('#select2 option').clone());
        } 
    var id = $(this).val();
    var options = $(this).data('options').filter('[value=' + id + ']');
    $('#select2').html(options);
    });

，相反，我宁愿它看起来像这样：

​

​

任何帮助都会很好，谢谢。

Answer 1

更新：

我已经更新了片段，以允许删除相关的选项，并放置列表syde-by syde。

如果不需要列表，则应该使用<ul>元素而不是下拉列表。

<ul id="categories"></ul>
<ul id="items"></ul>

将您的数据存储在JavaScript中，而不是在DOM中，您会发现它更灵活，更容易处理。

var data = [
  [ 'fruit', [ 'Banana', 'Apple', 'Orange' ] ], 
  [ 'animal', [ 'Wolf', 'Fox', 'Bear', 'Eagle' ] ], 
  [ 'car', [ 'BMW' ] ]
];

首先，迭代将数据追加到类别中的<li>元素。对于每个事件，添加一个将切换类活动并更新相关项的事件。

for ( var i=0; i < data.length; i++)
{
  $('<li data-category_id="' + i + '" >' + data[i][0] + '</li>'
  ).on('click', function(){
    $(this).toggleClass('active');
    showItems();
  }).appendTo('#categories');
} 

若要显示项，请在数据数组中搜索与具有active类的<li>元素相关的所有项。

function showItems()
{
  $( '#items' ).html('');
  $('#categories li.active').each( function()
  {
    var categoryId = $(this).data( 'category_id' );
    for ( var i = 0; i < data[categoryId][1].length; i++ )
      $( '#items' ).append( '<li>' + data[categoryId][1][i] + '</li>' );
  });
}

由于您希望同时拥有两个列表syde-by，添加以下CSS：

ul {
  float: left;
  width: 100px;
}

如果你想让它们看起来像你可以滚动的盒子：

ul {
  border: 1px solid black;
  height: 125px;
  overflow-y: scroll;
}

这里有一个片段：

​

var data = [
  [ 'fruit', [ 'Banana', 'Apple', 'Orange' ] ], 
  [ 'animal', [ 'Wolf', 'Fox', 'Bear', 'Eagle' ] ], 
  [ 'car', [ 'BMW' ] ],
  [ 'other 1', [ 'a', 'b' ] ],
  [ 'other 2', [ '1', '2' ] ]
];

for ( var i=0; i < data.length; i++)
{
  $('<li data-category_id="' + i + '" >' + data[i][0] + '</li>'
  ).on('click', function(){
    $(this).toggleClass('active');
    showItems();
  }).appendTo('#categories');
} 

function showItems()
{
  $( '#items' ).html('');
  $('#categories li.active').each( function()
  {
    var categoryId = $(this).data( 'category_id' );
    for ( var i = 0; i < data[categoryId][1].length; i++ )
      $( '#items' ).append( '<li>' + data[categoryId][1][i] + '</li>' );
  });
}

ul {
  float: left;
  width: 100px;
  list-style: none;
  border: 1px solid black;
  height: 125px;
  margin: 10px;
  overflow-y: scroll;
}

li {
  margin: 10px;
}

.active {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="categories"></ul>

<ul id="items"></ul>

​

希望能帮上忙！

Answer 2

创建一个额外的属性，因为您可能需要value属性才能在第二个select中获得所选的选项。

<select name="select2" id="select2">
<option value="1" data-value="1">Banana</option>
<option value="2" data-value="1">Apple</option>
<option value="3" data-value="1">Orange</option>
<option value="4" data-value="2">Wolf</option>
<option value="5" data-value="2">Fox</option>
<option value="6" data-value="3">Bear</option>
<option value="7" data-value="3">Eagle</option>
<option value="8" data-value="3">Hawk</option>
<option value="9" data-value="4">BWM<option>
</select>

...then您可以使用修改后的代码过滤第二个选择：

$("#select1").change(function() { 
    if($(this).data('options') == undefined){
        $(this).data('options',$('#select2 option').clone());
    } 
    var id = $(this).val();
    var options = $(this).data('options').filter('[data-value=' + id + ']');
    $('#select2').html(options);
});

Answer 3

select小部件需要有一个multiple属性以允许多个选择。

解决方案

我们将创建一个选项集合，并将其存储在变量entries中。

第二个选择选项将被最初删除，并在设置了选择1值后动态填充。

这是它的代码：

​

var entries;
$(document).ready(function() {
  // store options from selection2
  entries = getEntries();

  $("#select1").change(function() {
    var values = $(this).val();
    var $sel2 = $('#select2');

    // Remove all options in selection 2
    $sel2.find('option').each(function() {
      $(this).remove();
    });

    // Add only applicable options
    $.each(entries, function(index, entry) {
      if ($.inArray('' + entry.type, values) !== -1) {
        $sel2.append($("<option></option>")
          .attr("value", entry.value)
          .text(entry.text));
      }
    });

    // select first available option
    $sel2.val($sel2.find('option:first').val());
  });

  $("#select1").trigger('change');

});

function getEntries() {
  var e = [];
  $('#select2').find('option').each(function() {
    e.push(new Entry($(this).data('type'), $(this).val(), $(this).text()));
    $(this).remove();
  });
  return e;
}

// entry structure
function Entry(type, value, text) {
  this.type = type;
  this.value = value;
  this.text = text;
}

#select2 {
  position: absolute;
  margin: 8px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<select multiple="multiple" name="select1" id="select1" size="3">
  <option value="1">Fruit</option>
  <option value="2">Animal</option>
  <option value="3">Car</option>
</select>

<select name="select2" id="select2">
  <option data-type='1' value="1">Banana</option>
  <option data-type='1' value="2">Apple</option>
  <option data-type='1' value="3">Orange</option>
  <option data-type='2' value="4">Wolf</option>
  <option data-type='2' value="5">Fox</option>
  <option data-type='2' value="6">Bear</option>
  <option data-type='2' value="7">Eagle</option>
  <option data-type='3' value="8">BMW</option>
  <option data-type='3' value="9">Lexus</option>
</select>

​