Варианты группировки в JQuery

Question

У меня есть два выбора. Что такое ИТ и менеджмент. Оба они имеют один и тот же вариант. Как я могу сгруппировать их вместе?

Как я могу это сделать? Я действительно новый в JQuery

Как вы можете видеть, ИТ и менеджмент имели ту же опцию, что и аналитик. Как следует код, чтобы убедиться, что аналитик объявляется один раз, но может быть использован как в IT и Mangement

Код:

$(document).ready(function() { 
 
    $("#select1").change(function() { 
 
    if ($(this).data('options') == undefined) { 
 
     $(this).data('options', $('#select2 option').clone()); 
 
    } 
 

 
    var id = $(this).val(); 
 
    var options = $(this).data('options').filter('[value=' + id + ']'); 
 
    $('#select2').html(options); 
 
    }); 
 

 
    $("#select1").change(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select name="select1" id="select1"> 
 
    <option value="3"></option> 
 
    <option value="1">IT</option> 
 
    <option value="2">Management</option> 
 
</select> 
 
<select name="select2" id="select2"> 
 
    <option value="3"></option> 
 
    <option value="1">Programmer</option> 
 
    <option value="1">Technician</option> 
 
    <option value="1">Analyst</option> 
 
    <option value="2">HR</option> 
 
    <option value="2">Secretary</option> 
 
    <option value="2">Analyst</option> 
 
</select>

Answer 1

Как я понимаю, вы хотите, чтобы во втором выпадающем меню были заполнены разные параметры, в зависимости от выбора в первом. И вы хотите использовать «тот же» вариант (аналитик) как в первом, так и в втором поле. Вот один из способов вы можете сделать это:

HTML

<select name="select1" id="select1"> 
    <option value="it">IT</option> 
    <option value="management">Management</option> 
</select> 
<select name="select2" id="select2"> 
    <!-- options will be loaded dynamically --> 
</select> 

JavaScript

// hashtable of all roles 
// (keys could be strings or ints, depending on your style and data) 
var roles = {}; 
roles['code'] = 'Programmer'; 
roles['tech'] = 'Technician'; 
roles['analyst'] = 'Analyst'; 
roles['hr'] = 'HR'; 
roles['secretary'] = 'Secretary'; 
roles['boss'] = 'Boss'; 

// store the keys we want for each option group 
var groups = {}; 
groups['it'] = ['code', 'tech', 'analyst']; 
groups['management'] = ['hr', 'secretary', 'analyst']; 

function changeOptionGroup(groupKey) { 
    // clear out the current options 
    $("#select2").empty(); 

    // load the correct ones 
    groups[groupKey].forEach(function (value, index) { 
     $("#select2").append($("<option />") 
      .val(value) 
      .text(roles[value])); 
    }); 
} 

$(document).ready(function() { 
    // when the first box changes, update the second 
    $('#select1').change(function() { 
     changeOptionGroup($(this).val()); 
    }); 

    // fire on page load 
    $('#select1').change(); 
}); 

Объяснение

1. Во-первых, мы заселить roles со всеми возможными вариантами, которые мы хотим использовать во втором окне. Каждый из них хранится с ключом и значением.
2. Затем мы можем создать объект groups и сохранить массив ключей, которые мы хотим видеть в каждой группе. У группы также есть ключ - обратите внимание, как я сделал здесь ключи (it и management) так же, как и значения параметров в раскрывающемся списке select1. Это будет полезно через минуту.
3. Функция changeOptionGroup() принимает параметр groupKey, очищает второй блок и затем использует цикл для добавления правильных параметров во второй блок в зависимости от выбранной нами группы. groups[groupKey] обращается к объекту groups и получает массив требуемых ключей ролей. .text(roles[value]) просматривает определенную роль в объекте roles (value предоставляется петлей).
4. Наконец, мы можем связать все это в .ready(). Это довольно просто: просто привязка события к .change() для вызова changeOptionGroup с переданным в данный момент значением value. Нам также нужно запустить событие на загрузку страницы (в противном случае он не будет работать до тех пор, пока пользователь не изменит выбор).

JSFiddle: http://jsfiddle.net/do9kq54r/2/