Как объединить 2 выбранных элемента вместе HTML - PullRequest
Новая
       12

Как объединить 2 выбранных элемента вместе HTML

0 голосов
/ 24 февраля 2019

Я делаю сайт, и я хочу объединить 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>

Заранее спасибо за ваш awnser, nikoskon

Ответы [ 2 ]

0 голосов
/ 24 февраля 2019

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>
0 голосов
/ 24 февраля 2019

Я не знаю, какова ваша точная цель, но есть несколько хороших плагинов для выбора, которые изменяют выбор по-разному.

https://select2.org/

В большинстве случаев я использую плагин select2.Возможно, вы сможете решить свою проблему с помощью этого плагина, и вы найдете нужные варианты.

Или вы можете использовать optgroups

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

...