Question

最近我面临一个未知的问题。我在MVC4中使用自定义下拉列表并通过ajax填充数据。它运行正常，但问题是，在成功向控制器发送数据后，它不会清除数据。我试过这个例子..

<select data-placeholder="Select a Brand..." style="width:254px;" name="brand" id="brand">
     <option value=""></option>
</select>

$("#brand").select2({
     width: 254
});

对于清算下拉列表，我试过这样..

$("#brand").val("");

我在下拉列表中搜索了很多示例刷新数据但是我失败了。请帮我解决问题。在这里，我分享了我的长代码

<script type="text/javascript">
        $(document).ready(function () {

            $("#brand").select2({
                width: 254
            });
            $.get('/Settings/Brands/', function (data) {
                $.each(data, function (index, c) {
                    $('#brand').append('<option value="' + c.id + '">' + c.name + '</option>');
                });
            });


            $('#btnAdd').live("click", function () {
                if (confirm("Do you want to Save?") == true) {
                    $.ajax({
                        cache: false,
                        async: false,
                        type: "POST",
                        url: "/Settings/ItemAdd/",
                        dataType: "json",
                        data: adata,
                        success: function (data) {
                            alert(data.msg);
                            $('#list').trigger('reloadGrid');
                        },
                        error: function (data) {
                            alert(data.msg);
                            $('#list').trigger('reloadGrid');
                        }
                    });
                }
                $("#itemname").val("");
                $("#batchNo").val("");
                $("#desp").val("");

                $("#brand").find("option").val("");
               $("#ctg").val("");
                $("#supplier").val("");
                $("#unittype").val("");
                $("#qty").val("");
                $("#bprice").val("");
                $("#sprice").val("");
                $("#Edate").val("");
                $("#qlimit").val("");
                $("#vat").val("");
                $("#icode").val("");
            });





        });
    </script>

Answer 1

这应该有效：

$("#brand").empty();

有关jQuery的空函数的更多信息： https://api.jquery.com/empty/

示例：https://jsfiddle.net/mjc7302v/

Answer 2

与所有用于选择控件的jquery插件一样，该插件隐藏了原始的<select>标记，并将其替换为自己的html。更改原始选择的属性没有影响。相反，你需要使用插件的方法。

虽然您提问如何清除下拉选项值，但我认为您的意思是将其重置为默认null选项，在这种情况下它将是

$("#brand").select2("val", "");

附注：

不清楚为什么要在加载页面后加载值使用ajax调用。您可以简单地将其强烈绑定到您的模型使用@Html.DropDownListFor(m => m.Brand, model.BrandList, "Select a Brand...")查看模型包含public SelectList BrandList { get; set; }（或使用ViewBag属性 BrandList）并避免不必要的ajax调用。
.live已弃用。请改用.on（尽管在您的如果你没有使用事件委托就这么简单 $('#btnAdd').click(function() { ..）
使用url: '@Url.Action("ItemAdd", "Settings")',，而非url: "/Settings/ItemAdd/",，以便始终正确生成您的网址
您可以删除所有代码以重置个别控件（例如使用$("#itemname").val("");

$('form').get(0).reset();

Answer 3

$( "#brand").empty();

请参阅.empty()方法的jQuery API文档。

如何清除下拉选项值？

3 个答案: