如何刷新html元素？

Question

我曾嘗試尋找問題的任何可能解決方案，但到目前為止我所看到的都無效。 無論如何，我正在使用MVC 3，並且有一個名為“添加事件”的表單。 在該頁面上，我有一個下拉列表，其中包含用戶可以選擇的位置列表。 我在該下拉列表的正下方有一個鏈接，該鏈接允許用戶添加新位置。 現在，我具有用於在局部視圖中創建新位置的文本框，下拉列表等，當單擊鏈接時，該局部視圖將顯示在下拉列表下方。

無論如何，我只需要刷新下拉列表，這樣當我添加新位置時，它就在列表上。 現在發生的事情是，單擊“保存”后，局部視圖隱藏起來，我仍然需要刷新整個頁面才能在下拉列表中找到新位置，然后刪除在texboxes和dropdownlists上鍵入的所有內容頁。

如何使用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。 這將更新您的表單，因此當您實際單擊Submit myList值時，它將是新值。 希望這會有所幫助（如果有，請接受答案）