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

Question

我正在尝试创建一个具有 2 个并排列表的界面。一开始左边会有不同的选项，右边是空白的。下面的代码创建了下拉框，但我希望它是一个带有滚动条的框，这样 用户可以 select 多个选项 .

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

这是我的代码 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

制作一个额外的属性，因为您可能需要 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>

...然后您可以使用修改后的代码过滤第二个 select：

$("#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 2

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>

Answer 3

更新：

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

如果您不需要列表，您应该使用 <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> 元素附加到类别。对于每一个，添加一个事件来切换 class active 并更新相关项目。

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 数组中搜索与具有 active <li> 元素相关的所有项目 class.

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>

希望对您有所帮助！

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

Show options in second menu based on user selection in first menu

javascript

jquery

list

multi-select