JQuery условный выпадающий список на основе атрибутов

Question

Мне нужно показать/скрыть параметры списка выбора в зависимости от значения первого списка выбора, но я не могу использовать значение второго, которое мне нужно использовать атрибуты данных или что-то еще иначе, я стараюсь это из фрагмента, я обнаружил, что прекрасно работает на ценностях, но кажется, что я неправильно метод данных

Я покажу вам мой Html и ЯШ:

$(document).ready(function() { 
 
    var optarray = $("#group").children('option').map(function() { 
 
     return { 
 
      "data": this.data, 
 
      "option": "<option data='" + this.data + "'>" + this.text + "</option>" 
 
     } 
 
    }) 
 
     
 
    $("#type").change(function() { 
 
     $("#group").children('option').remove(); 
 
     var addoptarr = []; 
 
     for (i = 0; i < optarray.length; i++) { 
 
      if (optarray[i].data.indexOf($(this).data()) > -1) { 
 
       addoptarr.push(optarray[i].option); 
 
      } 
 
     } 
 
     $("#group").html(addoptarr.join('')) 
 
    }).change(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<select name="type" id="type"> 
 
    <option value="">Choose a Type</option> 
 
    <option value="music">Music</option> 
 
    <option value="art">Art</option> 
 
    <option value="cook">Cook</option> 
 
</select> 
 

 
<select name="group" id="group"> 
 
    <option value="">Choose a group</option> 
 
    <option value="band" data="music">Band</option> 
 
    <option value="guitarplayer" data="music">Guitar Player</option> 
 
    <option value="painter" data="art">Painter</option> 
 
    <option value="graffer" data="art">Graffeur</option> 
 
    <option value="chief" data="cook">Chief</option> 
 
</select>

Thx ребята (и девочки (:)

Answer 1

Попробуйте заменяя "data": $(this).attr("data") на номер "data": this.data,; chaining .get() - .map() для возврата массива вместо объекта jQuery; заменяя i = 1 на i = 0 на for инициализация, удалить option, не имеющую значения <option value="">Choose a Type</option> от повторения; в for заявлении заменяющего .indexOf($(this).val()) для .indexOf($(this).data())

$(document).ready(function() { 
 
    var optarray = $("#group").children('option').map(function() { 
 
     return { 
 
      "data": $(this).attr("data"), 
 
      "option": "<option data='" + $(this).attr("data") + "'>" + this.textContent + "</option>" 
 
     } 
 
    }).get(); 
 
     
 
    $("#type").change(function(e) { 
 
     $("#group").children("option").remove(); 
 
     var addoptarr = []; 
 
     for (i = 1; i < optarray.length; i++) { 
 
     console.log(optarray[i].data, optarray[i].option) 
 
      if (optarray[i].data.indexOf($(this).val()) > -1) { 
 
       addoptarr.push(optarray[i].option); 
 
      } 
 
     } 
 
     console.log(addoptarr) 
 
     $("#user_job_title_str").html(addoptarr.join("")) 
 
    }).change(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 
 
</script> 
 
<select name="type" id="type"> 
 
    <option value="">Choose a Type</option> 
 
    <option value="music">Music</option> 
 
    <option value="art">Art</option> 
 
    <option value="cook">Cook</option> 
 
</select> 
 

 
<select name="group" id="group"> 
 
    <option value="">Choose a group</option> 
 
    <option value="band" data="music">Band</option> 
 
    <option value="guitarplayer" data="music">Guitar Player</option> 
 
    <option value="painter" data="art">Painter</option> 
 
    <option value="graffer" data="art">Graffeur</option> 
 
    <option value="chief" data="cook">Chief</option> 
 
</select> 
 

 
<select id="user_job_title_str"></select>