Добавление параметров для выбора в HTML с использованием Jquery и Материализация css Не работает в laravel блейд

Question

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

HTML КОД

       <div class="input-field">
           <select name="subCategory" id="subcategory">
             <option value="" disabled selected>Select product sub-category</option> 
           </select>
         </div>

Jquery

 <script>

$(document).ready(function () {

    var jsonArray  = [
        {
            "id" : "1" ,
            "name" : "item1",
            "description" : "item 1 description"
        },
        {
            "id" : "2" ,
            "name" : "item2",
            "description" : "item 2 description"
        },
        {
            "id":"3" ,
            "name" : "item3",
            "description":"item 3 description"
        },{
            "id":"4" ,
            "name" : "item4",
            "description":"item 4 description"
        },
        {
            "id": "5" ,
            "name" : "item5",
            "description":"item 5 description"
        }

    ];



    $.each(jsonArray , (key , value)=> {
    console.log(value)
    $('#subcategory').append("<option>"+value.name+"</option>")  
    })

});

 </script>

Answer 1

Попробуйте:

function PopulateDropDown(jsonArray) {
    if (jsonArray  != null && jsonArray.length > 0) {
        $("#subcategory").removeAttr("disabled");
        $.each(jsonArray, function () {
            $("#subcategory").append($("<option></option>").val(this['id']).html(this['name']));
        });
    }
}

Answer 2

Если вы используете материализовать CSS Framework, убедитесь, что вы снова инициализируете выбор, после добавления новых опций. Это сработало для меня

 $.each(jsonArray , (key , value)=>{
      var option = new Option(value.name  , value.id)
      $('#subcategory').append(option) 
    }) 
    $('select').formSelect();