Question

我想要一个包含以下内容的页面： hyperlik“添加新国家”。按用户点击此链接后，应显示包含国家/地区名称的下拉列表。但是，此超链接应保留在此页面上。当用户再次单击此超链接时，应显示具有完全相同名称的第二个下拉列表。只要用户单击超链接，就应该重复此操作。重要的是不应重新加载此页面。有谁知道怎么做？

Answer 1

实现此目的的典型方法是让您的添加新国家/地区链接触发对您创建的页面的ajax调用，该页面将为您的列表提供数据。

这些天的首选方法似乎是让您调用的页面构建一个JSON响应，然后您调用它的ajax方法的回调可以将该数据填充到下拉列表中。

您从AJAX调用的页面可能是这样简单的：

protected override void  Render(HtmlTextWriter writer)
{
    Dictionary<string, int> myStuff = new Dictionary<string, int>();
    myStuff.Add("country1", 1);
    myStuff.Add("country1", 2);

    JavaScriptSerializer jss = new JavaScriptSerializer();
    Response.Write(jss.Serialize(myStuff.ToList()));
    Response.ContentType = "application/json";
}

在您的主页上使用此jQuery：

<script type="text/javascript">
    $(document).ready(function () {
        $("#btn").click(function () {
            getCountries();
        });
    });
    function getCountries() {
        $.ajax({
            url: "ApiPage.aspx",
            dataType: "json",
            success: function (data) {
                for (var i in data) {
                    $("#myDropDown").append($('<option></option>').val(data[i].Value).html(data[i].Key));
                }
            }

        });
    }
</script>

经过测试和工作。（在一个简化的例子中）我必须将json序列化器的Dictionary转换为List，以使其成为一个数组。请参阅更新的Serialize调用。还有一些验证，例如ajax调用是否返回真实数据？，这需要添加到现实生活中。

Answer 2

看起来你差不多正确。

HTML中的

如果你有一些标签围绕你想要下拉框的区域，那么它很简单。

例如：

HTML中的

：

<a href="javascript:addDD()">Add new country</a>

<div id="dropdownarea"></div>

在javascript中：

function addDD(){
document.dropdownarea.innerHTML += "HTML code for the drop down that you want";
}

在asp中添加新的下拉列表而不重新加载页面

2 个答案: