Блог

Главная - Вопросы по программированию - Проблема с созданием меню выбора динамически с использованием данных объекта и материализации

Проблема с созданием меню выбора динамически с использованием данных объекта и материализации

#javascript #jquery #html #materialize

#javascript #jquery #HTML #материализовать

Вопрос:

Я пытаюсь поместить меню выбора в модальное и сталкиваюсь со странной проблемой, заключающейся в том, что меню выбора загружается с помощью display: none, поэтому оно скрыто, это нормальное поведение с materialize?

В поле name над выбором отображается только первая запись из выбора, если я не удалю display: none в инспекторе, который затем позволяет мне выбрать любое значение из моего выбора, повторяя это значение выше. Что я делаю не так?

введите описание изображения здесь

это div, в который я добавляю выбор

 <div class="input-field col s12">
                    <select class="custName">
                    </select>
                    <label>Select Customer</label>
                </div>

Я вызываю это в конце моей HTML-страницы

 <script>$(document).ready(function(){
$('select').formSelect();  
});</script>

создание моих вариантов выбора здесь

 const custData = (data) => {
if (data.length) {
    let html = '';
    data.forEach(doc => {
        const cust = doc.data();
        //console.log(cust);
        const select = `
  <select>
    <option value=${cust.customerId}>${cust.name},  ${cust.address.postCode}</option>
  </select>
  `;
        html  = select;
    });
    customerList.innerHTML = html;
} else {
    customerList.innerHTML = '<ul class="center-align">no data</ul>'
  }
};

Пожалуйста, избавьте меня от моих страданий

Комментарии:

1. Вы должны инициализировать formSelect () при выборе после того, как ваш модал открыт, чтобы он работал.

Ответ №1:

Проблема в том, что ваш $('select').formSelect(); выполняется до того, как вы заполняете свои теги опций.

Решение: выполните вызов инициализации после кода заполнения вашего параметра.

Примечание: не заключайте каждый тег опции в тег выбора в вашей функции custData()

Например, этот выполняет инструкцию инициализации перед заполнением : 

 <!DOCTYPE html>
<html>

<head>
    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

<body>
    <div class="input-field col s12">
        <select id="s_1" class="custName">
        </select>
        <label>Select Customer</label>
    </div>
    <script type="text/javascript">
    var select = document.getElementById("s_1");
    var options = "<select><option value = 1>1</option></select><select><option value = 2>2</option></select><select><option value = 3>3</option></select>";
     setTimeout(function(){ select.innerHTML = options; }, 1000);
    
   
    $(document).ready(function() {
        $('select').formSelect();
    });
    </script>
</body>

</html>

Этот выполняет инициализацию после заполнения:

 <!DOCTYPE html>
<html>

<head>
    <script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>

<body>
    <div class="input-field col s12">
        <select id="s_1" class="custName">
        </select>
        <label>Select Customer</label>
    </div>
    <script type="text/javascript">
    var select = document.getElementById("s_1");
    var options = "<select><option value = 1>1</option></select><select><option value = 2>2</option></select><select><option value = 3>3</option></select>";
     setTimeout(function(){ select.innerHTML = options;  $('select').formSelect();}, 3000);
    
   
    $(document).ready(function() {
        $('select').formSelect();
    });
    </script>
</body>

</html>

Ответ №2:

Вы должны инициализировать formSelect () при выборе после открытия вашего модала, чтобы он работал. Замените modal_id вашим атрибутом modal id.

 $('#modal_id').on('shown.bs.modal', function (e) {
  $('select').formSelect();  
});