javascript - 使用语义ui想要生成动态下拉菜单

Question

语义用户界面下拉菜单出现问题。我一直在使用 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>

Answer 1

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>