Question

您好我已经创建了在按钮点击时添加了多个下拉列表的逻辑。下面是我的观点代码

<body>
    @using (Html.BeginForm("Index", "Home", FormMethod.Post))
    {
        <input id="btnAdd" type="button" value="Add" onclick="AddTextBox()" />
        <br />
        <br />
        <div id="DropdownContainer">
            <!--Textboxes will be added here -->
        </div>
        <br />
        <input type="submit" value="Submit" />
    }
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function GetDynamicTextBox(value) {
            var div = $("<div />");
            var textBox = '<div class="col-xs-2"><select  name="From" class="form-control">';
            textBox = textBox + '<option value="">From</option>';
            textBox = textBox + '<option value="1 AM">1 AM</option>';
            textBox = textBox + '<option value="1.30 AM">1.30 AM</option>';
            textBox = textBox + '<option value="2 AM">2 AM</option>';
            textBox = textBox + '<option value="2.30 AM">2.30 AM</option>';

            textBox = textBox + '</select></div>';

            textBox = textBox + '<div class="col-xs-2"><select  name="To" class="form-control">';
            textBox = textBox + '<option value="">To</option>';
            textBox = textBox + '<option value="1 AM">1 AM</option>';
            textBox = textBox + '<option value="1.30 AM">1.30 AM</option>';
            textBox = textBox + '<option value="2 AM">2 AM</option>';
            textBox = textBox + '<option value="2.30 AM">2.30 AM</option>';                
            textBox = textBox + '</select>  </div>';

            //textBox.val(value);
            div.append(textBox);

            var button = $("<input />").attr("type", "button").attr("value", "Remove");
            button.attr("onclick", "RemoveTextBox(this)");
            div.append(button);

            return div;
        }
        function AddTextBox() {
            var div = GetDynamicTextBox("");
            $("#DropdownContainer").append(div);
        }

        function RemoveTextBox(button) {
            $(button).parent().remove();
        }

        $(function () {
            var values = eval('@Html.Raw(ViewBag.Values)');
            if (values != null) {
                $("#DropdownContainer").html("");
                $(values).each(function () {
                    $("#DropdownContainer").append(GetDynamicTextBox(this));
                });
            }
        });
    </script>
    @if (ViewBag.Message != null)
    {
        <script type="text/javascript">
            $(function () {
                alert("@ViewBag.Message")
            });
        </script>
    }
</body>

我的控制器端调用是

[HttpPost]
        public ActionResult Index(string[] DynamicTextBox)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            ViewBag.Values = serializer.Serialize(DynamicTextBox);

            string message = "";
            foreach (string textboxValue in DynamicTextBox)
            {
                message += textboxValue + "\\n";
            }
            ViewBag.Message = message;

            return View();
        }

但是当我点击提交时，我无法获得所选的两个下拉值。

请查看下图

我需要为所选的所有多个下拉值获取值，以及如何将下拉ID验证选中。

ON提交点击我需要在数据库中保存选定的下拉值。

验证码

 function validate() {
            var values = [];
            $('#DropdownContainer option').each(function () {
                var e = $(this);
                console.log(e);               
                return false;
            });
            return false;
     }

如何获取所选值？

Answer 1

问题不在于创建这些下拉框。您的控制器中的模型绑定不正确。这些名称为From和To的多个下拉框。例如，您的操作应如下所示：

[HttpPost]
public ActionResult Index(string[] from, string[] to)
{
   // your code            
}

更新：在客户端

添加了验证码

    function validateByInputName(name) {
        var isValidate = true;
        $("select[name='" + name+"']").each(function (index, item) {
            var selectedValue = $(item).val();
            if (selectedValue == "") {
                isValidate = false;
                return;
            }
        });

        return isValidate;
    }

    function validate() {
        return validateByInputName('From') && validateByInputName('To');
    }

我认为你现在可以得到这些想法。

如何动态创建MVC中的下拉值

1 个答案: