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

Question

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

一旦用户选择了左侧的选项，右侧列表中就会出现与其选择相关的一系列预定义选项。如果用户在左侧菜单中选择了多个选项，则所有预定义选项都会显示在左侧菜单中。与每个选择相关的选项将出现在右侧菜单中。

这是我用 fiddle 得到的代码 found here.

<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

更新:

我已经更新了代码片段，以允许删除相关选项并将列表逐个放置。

<小时/>

如果您不需要列表，则应该使用 <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');
} 

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

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>' );
  });
}

由于您希望两个列表并排，因此添加以下 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>

希望对你有帮助!