如何刷新 html 元素？

Question

我已经尝试为我的问题寻找任何可能的解决方案，但到目前为止我所看到的都没有。无论如何，我正在使用 MVC 3，并且我有一个名为 Add Event 的表单。在该页面上，我有一个下拉列表，其中包含用户可以选择的位置列表。我在该下拉列表下方有一个链接，允许用户添加新位置。现在，我有文本框、下拉列表等用于在局部视图中创建新位置，当我单击链接时，该位置将显示在下拉列表下方。

无论如何，我需要刷新下拉列表，这样当我添加新位置时，它会直接出现在列表中。现在发生的事情是在我单击保存后，部分视图会自行隐藏，我仍然需要刷新整个页面以获取下拉列表上的新位置，然后删除我在相同的 texbox 和下拉列表中输入的所有内容页面。

我怎样才能使用 javascript/ajax 做到这一点？

Answer 1

使用 jQuery，你可以只重新加载你想要的元素：

$('#menu').load("myServerScript.php #menu");

http://api.jquery.com/load/

Answer 2

这可能会对你有所帮助..

var opt = document.createElement("option");
     // Assign text and value to Option object
    opt.text = Text;
    opt.value = Value;        

    // Add an Option object to Drop Down
    document.getElementById("YourDropDownID").options.add(opt,null);

Answer 3

这可以用 jQuery 来完成。 我的做法是这样的。假设您有一个看起来像这样的表单：

<form method="post" action="#">
    <select id="myList" name="myList">
        <option value="1">Value 1</option>
        <option value="2">Value 2</option>
    </select>
    <input type="text" id="newValue" name="newValue" />
    <a href="#" id="btn">add new value</a>            
    <input type="submit" value="Submit">
</form>

其中 myList 是您要添加新值并刷新的下拉列表，newValue 是接收要添加到下拉列表 (myList) 的新值的文本字段，ID 为 btn 的链接是添加按钮。您可以添加一个看起来像这样的 jQuery：

<script type="text/javascript">
    $(document).ready(function () {
        $("#btn").click(function (event) {
            event.preventDefault();
            $.post("/home/addvalue", { value: $("#newValue").val() }, function (result) {
                if (result != null) {
                    $("#myList").append("<option value='" + result.id + "' selected='selected'>" + result.text + "</option>");
                }
            });
        });
    });
 </script>

当您单击链接 (btn) 时，我会从文本框中收集值（并且只是该值）并将 POST（表单提交）发送到服务器。 我猜您希望服务器给出某种答案，其中包括新插入的值的 id。 如果服务器发回该新 id，然后我将新结果附加到列表中（并将其设置为选定的）

在服务器端，您的代码可能看起来像这样

[HttpPost]
public JsonResult AddValue(FormCollection collection) 
{ 
    //do database inser for the new value and get the id
    var response = new Dictionary<string, object>();
    response.Add("id", 3);//3 here represents that last id
    response.Add("text", collection["value"]); //the value you sent for the new option
    return Json(response);
}

您收到 POST(ed) 数据并保存到数据库。一旦保存了值并且您将新的 id 保存到字典中，然后您将序列化并作为 json 发送回上面的 javascript。 这将更新您的表单，因此当您实际点击提交 myList 值时，您将成为新值。 希望这会有所帮助（如果有，请接受答案）