Используя семантический интерфейс вы хотите создать динамический выпадающий - PullRequest
Новая
       14

Используя семантический интерфейс вы хотите создать динамический выпадающий

0 голосов
/ 30 мая 2019

Возникла проблема с выпадающим списком семантического интерфейса.Я использовал Semantic-Ui, и хотел динамически изменить выпадающий элемент.То есть, когда я выбираю значение из первого раскрывающегося списка, создается элемент второго раскрывающегося списка, но когда я выбираю значение из второго раскрывающегося списка, третий раскрывающийся список и его элемент не генерируются.

<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

<div class="ui selection dropdown select">
    <input type="hidden" name="programmetype">
    <div class="text">First dropdown</div>
    <i class="dropdown icon"></i>
    <div class="menu">
        <div class="item" data-value="val1">Car</div>
        <div class="item" data-value="val2">Tank</div>
        <div class="item" data-value="val3">Plane</div>
    </div>
</div>

<div id="servicetype"></div>
<script>
$(".select").dropdown({
    onChange: function() {
        $('.select').remove();
        $('#servicetype').addClass('ui selection dropdown select-language');

        $('#servicetype').html(
            '<input type="hidden" name="servicetype">'
            +'<div class="text">Second dropdown</div>'
            +'<i class="dropdown icon "></i>'
            +'<div class="menu">'
            +'<div class="item" data-value="acp">ACP</div>'
            +'<div class="item" data-value="art"> ART</div>'
            +'</div>'
            +'</div>'
        );
        $('#servicetype').dropdown();
        $(".select-language").dropdown({
            onChange: function() {
                $('.select-language').remove();
                $('#servicetype').addClass('ui selection dropdownselect');

                $('#servicetype').html(
                    '<input type="hidden" name="servicetype">'
                    +'<div class="text">Third dropdown</div>'
                    +'<i class="dropdown icon "></i>'
                    +'<div class="menu">'
                    +'<div class="item" data-value="acp">AC</div>'
                    +'<div class="item" data-value="art"> AR</div>'
                    +'</div>'
                    +'</div>'
                );
                $('#servicetype').dropdown();
            }
        });
    }
});
</script>

1 Ответ

1 голос
/ 30 мая 2019
  1. Удалил автономный <div id="servicetype"></div> в разметке и создал его на лету
  2. Цепочка методов
  3. addClass изменено
  4. Предложение: Выможет создать функцию с литералом шаблона, содержащим всю раскрывающуюся разметку и передать значения в качестве аргументов 

$(".select").dropdown({
  onChange: function () {
    $(this).remove();
    $('body').append('<div id="servicetype"></div>');
    $("#servicetype").addClass("ui selection dropdown select-language").html(
      "<input type='hidden' name='servicetype'>" +
      "<div class='text'>Second dropdown</div>" +
      "<i class='dropdown icon'></i>" +
      "<div class='menu'>" +
      "<div class='item' data-value='acp'>ACP</div>" +
      "<div class='item' data-value='art'> ART</div>" +
      "</div>" +
      "</div>"
    ).dropdown();

    $(".select-language").dropdown({
      onChange: function () {
        $(this).remove();
        $('body').append('<div id="servicetype"></div>');
        $("#servicetype").addClass("ui selection dropdown").html(
          "<input type='hidden' name='servicetype'>" +
          "<div class='text'>Third dropdown</div>" +
          "<i class='dropdown icon'></i>" +
          "<div class='menu'>" +
          "<div class='item' data-value='acp'>AC</div>" +
          "<div class='item' data-value='art'> AR</div>" +
          "</div>" +
          "</div>"
        ).dropdown();
      }
    });
  }
});
<div class="ui selection dropdown select">
  <input type="hidden" name="programmetype">
  <div class="text">First dropdown</div>
  <i class="dropdown icon"></i>
  <div class="menu">
    <div class="item" data-value="val1">Car</div>
    <div class="item" data-value="val2">Tank</div>
    <div class="item" data-value="val3">Plane</div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
...