使用语义ui要生成动态下拉列表

 收藏

在语义UI下拉菜单中遇到问题。我一直在使用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. Deleted the standalone <div id="servicetype"></div> in the markup and creating it on the fly
    2. Chaining of the methods
    3. addClass changed
    4. Suggestion: You can create a function with a template literal containing all the dropdown markup and pass the values as arguments
    $(".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>