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

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

0 голосов
/ 13 марта 2019

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

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

enter image description here

это 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>'
  }
};

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

Ответы [ 2 ]

1 голос
/ 13 марта 2019

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

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

Примечание: не заключайте каждый тег option в тег select в вашей функции 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>
1 голос
/ 13 марта 2019

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

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