Question

所以我正在尝试创建一个动态Semantic UI Dropdown。对于我在下面的示例， Species 的下拉列表最初为空白，但是当您选择协议时，会发出一个AJAX请求并为下一个返回一组新选项下拉（物种）。

function initDropdowns() {
  $(".ui.dropdown").dropdown({
    allowAdditions: false,
    fullTextSearch: true,
    onChange: function(value, text, choice) {
      if ($(this).data("type") == "protocol") {
        var menu = $(".species.ui.dropdown").find(".menu");

        menu.empty();
        menu.append("<div class='item' data-value='1'>Mice</div><div class='item' data-value='2'>Rats</div><div class='item' data-value='3'>Guinea Pigs</div>"); // This comes from an AJAX request

        initDropdowns();
      }
    }
  });
}

$(document).ready(function() {
  initDropdowns();

  $(document).on("click", "button", function(e) {
    e.preventDefault();
    console.log($("form").serialize());
  });
});

form {
  width: 250px;
  margin: auto;
}

form .ui.dropdown {
  min-height: 1em !important;
  height: 1em !important;
  margin-bottom: 10px;
}

button {
  display: block;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/components/dropdown.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/components/dropdown.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/components/transition.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.7/components/transition.min.css" rel="stylesheet" />


<form action="test.php" method="post">
  <select name="protocol" class="protocol ui fluid search dropdown required" data-type="protocol" data-default="Protocol">
    <option value="">Protocol</option>
    <option value="123">SAM-123</option>
    <option value="456">SAM-456</option>
  </select>

  <select name="species" class="species ui fluid search dropdown required" data-type="species" data-default="Species">
    <option value="">Species</option>
  </select>

  <button>Submit Form</button>
</form>

这似乎在动态填充下拉选项方面运行良好，但是当我在完成所有选择后提交表单时，传递给服务器的数据不包括species。

Answer 1

index.php：

＆＃13;

$(document).ready(function() {
                function populate() {
                    $.ajax({
                        type: "POST",
                        url: '/populate.php',
                        success: function(data) {
                            var species = JSON.parse(data);
                            $('#species').dropdown({
                    			placeholder: "species",
                                values: species,
                                fullTextSearch: true,
                            });
                            return data;
                        },
                        error: function() {
                            alert('error of ajax, populate anyway just to show');
                            var species = JSON.parse('[{"name" : "Mice", "value" : "1"}, {"name" : "Rats", "value" : "2"}, {"name" : "Guinea Pigs", "value" : "3"}]');
                            $('#species').dropdown({
                    			placeholder: "species",
                                values: species,
                                fullTextSearch: true,
                            });
                        }
                    });
                }
                
                var protocol = [{"name" : "SAM-123", "value" : "123"}, {"name" : "SAM-456", "value" : "456"}];
                $('#protocol').dropdown({
            		placeholder: "Protocol",
                    values: protocol,
                    fullTextSearch: true,
                });
                
                populate();
                
                $(document).on("click", "button", function(e) {
                        e.preventDefault();
                        console.log($("form").serialize());
                        var e = $(".form").form('get values'); /*https://semantic-ui.com/behaviors/form.html*/
                        console.log("i manipulate the protocol value : " + e.protocol);
                        console.log("i manipulate the species value : " + e.species);
                });
            });

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <script
          src="https://code.jquery.com/jquery-3.3.1.min.js"
          integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
          crossorigin="anonymous"></script>
        
        <!-- Semantic UI -->
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.14/semantic.min.css"  />
    </head>
    <body>
        <form class="ui form" action="post.php" method="post">
        	<div class="field">
        		<label>Protocol</label>
        		<div id="protocol" class="protocol ui search labeled selection dropdown">
        			<input name="protocol" type="hidden"> <!-- store the selected value that gonna be posted -->
        			<span class="text"></span>
        			<i class="dropdown icon"></i>
        		</div>
        	</div>
        	
        	<div class="field">
        		<label>Species</label>
        		<div id="species" class="species ui search labeled selection dropdown">
        			<input name="species" type="hidden"> <!-- store the selected value that gonna be posted -->
        			<span class="text"></span>
        			<i class="dropdown icon"></i>
        		</div>
        	</div>
        	
        	<button type="submit" class="ui fluid teal submit button">Submit</button>
        </form>
    </body>
</html>

＆＃13;

populate.php：

<?php
    echo '[{"name" : "Mice", "value" : "1"}, {"name" : "Rats", "value" : "2"}, {"name" : "Guinea Pigs", "value" : "3"}]';
?>

动态语义UI下拉列表未随表单提交

1 个答案: