Question

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

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

我怎样才能使用javascript / ajax？

Answer 1

这可能对你有帮助..

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 2

使用jQuery，您只能重新加载所需的元素：

$（'＃menu'）。load（“myServerScript.php #menu”）;

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

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值将是新值。希望这有帮助（如果有，请接受答案）

如何刷新html元素？

3 个答案: