Динамически создать поле ввода Select - PullRequest
Новая
       31

Динамически создать поле ввода Select

0 голосов
/ 25 июня 2018

У меня проблема при попытке динамически создать поле ввода выбора Materialize с использованием jQuery. Моя цель - добавить div с полем выбора при нажатии кнопки. Вот мой текущий код: 

$(document).ready(function(){
  $('select').formSelect();
});

$("#addSelect").click(function(){
   $("#addSelect").addClass("disabled");
   $("#addSelect").hide();    
   $("#newContent").append("<div class='row'><div class='input-field col s12'><select> <option value='' disabled selected>Choose your option</option><option value='1'>Option 1</option><option value='2'>Option 2</option><option value='3'>Option 3</option> </select><label>Materialize Select</label><label>Materialize Select</label></div></div><button class='waves-effect waves-light bg-blue btn right' type='button'>Go</button>");  
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<div class="container">
<div id='newContent'></div>
<br>
<button class="waves-effect waves-light bg-blue btn right" id="addSelect">Add Select</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

Он добавляет все html для выбора, когда я проверяю элемент, однако выбор не работает. Может быть, это проблема css?

Спасибо за любую помощь!

Ответы [ 2 ]

0 голосов
/ 25 июня 2018

В вашем materialize.min.css в строке 13 select установлено значение display: none;

Materialize.min.css select hidden

0 голосов
/ 25 июня 2018

Проблема в том, что вы запускаете функцию $("select").formSelect() до того, как динамически добавленное поле выбора добавляется в DOM.

Это можно исправить, явно вызвав .formSelect() для вновь добавленного элемента: 

$("#addSelect").click(function(){
   $("#addSelect").addClass("disabled");
   $("#addSelect").hide();    
   $("#newContent").append("<div class='row'><div class='input-field col s12'><select> <option value='' disabled selected>Choose your option</option><option value='1'>Option 1</option><option value='2'>Option 2</option><option value='3'>Option 3</option> </select><label>Materialize Select</label><label>Materialize Select</label></div></div><button class='waves-effect waves-light bg-blue btn right' type='button'>Go</button>")

// Find the newly added element and call formSelect() on it.
.find("select").formSelect();
});

Рабочий пример: https://codepen.io/sdflkjgnsdlfn/pen/pKZKOr

Есть некоторые проблемы с CSS, но это должно помочь вам!

...