Question

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

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

以下是我的小提琴代码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

更新：

我更新了代码段以允许删除相关选项并放置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');
}

要显示您的商品，请在数据数组中搜索与有效类相关的<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-side，请添加以下CSS：

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

如果你希望它们看起来像你可以滚动的方框：

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

这里有你的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望它有所帮助！

Answer 2

创建一个额外的属性，因为您可能需要value属性来获取第二个选择中的所选选项。

<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>

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

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

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

3 个答案: