Как динамически создать HTML вход, содержащий список данных, используя jQuery? - PullRequest
Новая
       20

Как динамически создать HTML вход, содержащий список данных, используя jQuery?

0 голосов
/ 08 января 2020

У меня есть HTML datalist, который выглядит следующим образом 

<input type="text" list="cars" /> 
<datalist id="cars">
    <option>Volvo</option>
    <option>Saab</option>
    <option>Mercedes</option>
    <option>Audi</option>
</datalist>

Теперь у меня есть cars list

var carsList = ['Volvo', 'Saab', 'Mercedes', 'Audi']

Теперь я хочу создать input field и datalist и заполните его динамически, используя jquery. Поэтому я хочу создать приведенный выше фрагмент html динамически, используя jquery.

Так вот, что я делаю 

 var carInput = document.createElement("input");
 carInput.type="text";
 carInput.list="cars";
 carInput.id = "carName"
 var carDatalist = document.createElement("datalist");
 carDatalist.id="cars";

 $.each(carsList, function(i, item) {
        $("#cars").append($("<option>").attr('value', i).text(item));
 });

Но он создает только элемент input, а не datalist элемент с ним. Что я делаю не так?

РЕДАКТИРОВАТЬ: Я хочу создать независимый html, так как я хочу использовать его только во всплывающем окне sweetalert2 и принимать данные от пользователя.

Это то, что я показываю пользователю. Во всплывающем окне отображается только input, но не dropdown. 

swal({
      title: 'Select a car name or define one',
      html: carInput,
      showCancelButton: true,
      width: '500px', 
      });
.

1 Ответ

1 голос
/ 08 января 2020

Создан шаблон скрытого div для того, чтобы быть в DOM, а затем клонировать его с добавленным списком данных: 

var carsList = ['Volvo', 'Saab', 'Mercedes', 'Audi'];

$(".tmp").find("#cars").html("");
$.each(carsList, function(i, item) {
    $(".tmp").find("#cars").append($("<option>").attr('value', i).text(item));
});

var div = $(".tmp").clone().show();

Swal.fire({
  title: 'Select a car name or define one',
  html: div,
  showCancelButton: true,
  width: '500px', 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert2@9.5.4/dist/sweetalert2.min.css">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sweetalert2@9.5.4/dist/sweetalert2.all.min.js"></script>
<div class="tmp" style="display: none;">
    <input type="text" list="cars" /> 
    <datalist id="cars">
    </datalist>
</div>
...