Как объединить 2 элемента select вместе html
я делаю веб-сайт, и я хочу объединить 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>
Заранее спасибо за ваш ответ, никоскон
Ответы 2
Я не знаю, какова ваша точная цель, но есть несколько хороших плагинов выбора, которые изменяют выбор по-разному.
В большинстве случаев я использую плагин select2. Возможно, вы сможете решить свою проблему с помощью этого плагина и найдете нужные вам опции.
Или еще одна вещь, которую вы можете использовать, это optgroups
https://developer.mozilla.org/de/docs/Web/HTML/Element/optgroup
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>Это было бы хорошо, только если бы у меня был небольшой выбор элементов для каждого основного варианта (1, 2, 3 в моем примере), но для того, что мне нужно, мой выбор намного больше.
Итак, вы хотите выбрать в первом поле выбора (например, производители автомобилей) и выбрать во втором в зависимости от первого (например, модели автомобилей выбранного производителя)?
Да! В вашем примере я хочу выбрать ManufacturerX, а также выбрать CarX, CarY...
Добавлено новое решение @nikoskon
Это почти идеально, единственное, чего не хватает, — это возможности выбора более 1 элемента как для группы, так и для членов группы. Если это невозможно для группы, это нормально, но мне нужно иметь возможность выбрать более 1 участника группы. Спасибо за вашу помощь!
@nikoskon понял, зацени :)
ИДЕАЛЬНО! Большое спасибо! Я очень ценю вашу помощь!
Как насчет оптгруппы? w3schools.com/tags/tag_optgroup.asp