Question

遇到了语义UI下拉菜单的问题。我一直在使用Semantic-Ui，并想动态更改下拉菜单项。也就是说，当我从第一个下拉菜单中选择值时，将生成第二个下拉菜单项，类似于第三个下拉菜单项，但是第三个下拉列表项却没有在表格内显示

<style>

style type ='text/css'>.responsive {
    width: 100%;
    height: auto;
}

caption {
    text-align: center;
    text-transform: lowercase;
    font-size: 125%;
    padding: 5px;
    letter-spacing: 5px;
    font-weight: bold;
}

label {
    width: 200px;
    display: inline-table;
}

table, th, td {
    border: 1px solid black;
}

table, tr {
    border: 1px solid black;
    padding: 5px;
}

select {
    text-align: center;
    text-align-last: center;
}

option {
    text-align: center;
}

#container {
    width: '500px'; //
    border: 1px solid #333;
    margin: auto;
    text-align: center;
}

#add {
    width: '500px'; //
    border: 1px solid #333;
    margin: auto;
    text-align: center;
}
</style>

<script>
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
    type="text/javascript"></script>
<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>

<body>
    <br />
    <!-- <h1 align="center">WEB-APP UI</h1> -->
    <table style="width: 50%; background-color: #2f4f4f;" align="left">
        <tr>
            <td height="250">
                <div class="ui selection dropdown select">
                    <input type="hidden" name="programmetype">
                    <div class="text">Choose first dropdown</div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <div class="item">AC</div>
                        <div class="item ">AB</div>
                        <div class="item ">AN</div>
                    </div>
                </div>
                <div id="servicetype"></div>
            </td>
        </tr>
    </table>
    <script>

$(".select").dropdown({
      onChange: function (val) {

        $(this).remove();

        $('label').remove();

        $('body').append('<form name="add" id="add" ><label><TABLE BORDER="3"><br/><br/><form class="ui form"><div class="inline field"><TR><TH> <label>Enter Input</label></TH><TD><input type="text"></TD></TR></div><td><button class="ui button" type="submit" button id="add" >submit</button></td></TABLE> </form><br> ');

        $("#add").submit(function(){
             $('label').remove();

             $('#add').remove(); 
        $('body').append('<div id="servicetype"></div>');

        $("#servicetype").addClass("ui selection dropdown select-language").html(
          "<input type='hidden' name='servicetype'>" +
          "<div class='text'>Choose second dropdown</div>" +
          "<i class='dropdown icon'></i>" +
          "<div class='menu'>" +
          "<div class='item'>BC</div>" +
          "<div class='item'>BM </div>" +
          "<div class='item'> BH </div>" +
          "</div>" 

        ).dropdown();

          $(".select-language").dropdown({
          onChange: function () {
            $(this).remove();
            $('label').remove();

            $('body').append('<form name="add" id="add" ><label><TABLE BORDER="3"><br/><br/><form class="ui form"><div class="inline field"><TR><TH> <label>Enter Input</label></TH><TD><input type="text"></TD></TR></div><td><button class="ui button" type="submit" button id="add" >submit</button></td></TABLE> </form><br> ');
            $("#add").submit(function(){
                 $('label').remove();

                 $('#add').remove(); 
            $('body').append('<div id="servicetype"></div>');

            $("#servicetype").addClass("ui selection dropdown").html(
              "<input type='hidden' name='servicetype'>" +
              "<div class='text'>Choose third dropdown</div>" +
              "<i class='dropdown icon'></i>" +
              "<div class='menu'>" +
              "<div class='item'>VB</div>" +
              "<div class='item'> NH</div>" +
              "<div class='item'> MJ </div>" +
              "</div>" 
            ).dropdown(); 

            $(".dropdown").dropdown({
                  onChange: function () {
                    $(this).remove();
                    $('label').remove();
                    $('body').append('<form name="add" id="add" ><label><TABLE BORDER="3"><br/><br/><form class="ui form"><div class="inline field"><TR><TH> <label>Enter Input</label></TH><TD><input type="text"></TD></TR></div><td><button class="ui button" type="submit" button id="add" >submit</button></td></TABLE> </form><br> ');

                  }
            });


            });
          }
        });   


        });

        }
    });
    </script>
</body>

如何使用语义UI生成动态下拉列表

0 个答案: