如何将2个选择元素组合在一起

Question

我正在制作一个网站，我想将2个选择元素组合在一起。 我的意思是在另一个内部有一个选择选项。 在子选择中，用户可以选择一个以上的选项。 这就是我的意思（不起作用）：

<select>
 <option value="1">
  <select>
   <option value="11">11 text</option>
   <option value="12">22 text</option>
  </select>
 </option>
 <option value="2">
  <select>
   <option value="21">21 text</option>
   <option value="22">22 text</option>
  </select>
 </option>
 <option value="3">
  <select>
   <option value="31">31 text</option>
   <option value="32">32 text</option>
  </select>
 </option>
</select>

预先感谢您的遮阳篷nikoskon

Answer 1

我不知道您的确切目标是什么，但是有一些不错的选择插件可以以不同的方式更改选择。

https://select2.org/

我在大多数情况下都使用select2插件。 也许您可以使用该插件解决问题，然后找到所需的选项。

或者您可以使用的另一种选择是optgroups

https://developer.mozilla.org/de/docs/Web/HTML/Element/optgroup

Answer 2

Optgroup看起来像这样。 这符合您的需求吗？

 // '<value>': '<text>' var group_members = { '1': { '11': '11', '12': '12', }, '2': { '21': '21', '22': '22', }, '3': { '31': '31', '32': '32', }, }; $('select[name=group]').on('change', function() { var $selectMember = $('select[name=group_member]'); // clear options $selectMember.find('optgroup').remove(); $selectMember.find('option').remove(); // source here is 'group_members' // if you have much data i recommend using ajax here to query data by a script // as JSON have a look at AJAX - jQuery.ajax var selectedGroups = $(this).val(); for(var i in selectedGroups) { var selectedGroup = selectedGroups[i]; var optgroup = $('<optgroup>').attr('label', selectedGroup); for(var value in group_members[selectedGroup]) { optgroup .append( ($('<option>', { value: value }) .text(group_members[selectedGroup][value])) ); } $selectMember.append(optgroup); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> Hold ctrl to select multiple <hr /> Group: <select name="group" multiple size=5> <option value=''>Please Select</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> Group Members: <select name='group_member' size=5 multiple></select>