我正在制作一个网站,我想结合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
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>
我不知道您的确切目标是什么,但是有一些不错的选择插件以不同的方式更改选择。
https://select2.org/
我在大多数情况下都使用Select2插件。也许您可以通过该插件解决问题,并且发现和所需的选项。
或您可以使用的另一件事是OptGroup
https://developer.mozilla.org/de/docs/web/html/element/optgroup