jQuery的 - 下拉列表變爲空後更改和表單提交

我有一個下拉菜單，用戶選擇後，用一些新的數據重新加載頁面。當在下拉菜單中進行更改/選擇和提交時，頁面重新加載和下拉菜單將變爲空。我想提交後保留下拉數據，並顯示用戶選擇了什麼。預先感謝任何幫助，我是新手。jQuery的 - 下拉列表變爲空後更改和表單提交

$(document).ready(function() { 
    $("#ddlConsumer").change(function() { 
     var selected = $("#ddlConsumer :selected").text(); 
     localStorage.setItem("selected", selected); 
     $("#paymentform").submit(); 

    }); 
}); 

var selectedConsumer = localStorage.getItem("selected"); 
console.log(selectedConsumer); 
$("#ddlConsumer").val(selectedConsumer);

的HTML部分：

<td> 
    <div class="form-group"> 
     <label class="col-sm-4 control-label">Consumer: <span>*</span> </label> 
     <div class="col-sm-6"> 
      @Html.DropDownList("ConsumerID", (SelectList)ViewBag.Consumer, new { id = "ddlConsumer", @class = "form-control"}) 
     </div> 
    </div> 
</td>

來源

2016-07-27 doooville

我不知道你的下拉列表的文本/值是什麼樣子，但我可以看到你節省掉的.text（），而不是.VAL（）。然後，您將設置下拉菜單val =所選選項的文本。如果文本與該值不匹配，則不會得到選定的選項 – mhodges

此外，上面顯示的所有js代碼都應位於doc.ready（）中。 $（「＃ddlConsumer」）.val（選中）可能在Razor呈現下拉列表 – mhodges

之前得到執行，我已經添加了.val（），但最終放在同一個地方。也只是嘗試添加doc.ready（）中的所有內容，除了最後一行。仍然無法弄清楚。 :( – doooville

有一件事你應該知道的是，HTTP協議是無狀態的事實。這意味着，一旦您發送了表單，頁面將被重新載入，並且值將丟失。爲了解決這個問題，你可以做兩件事情：

1 - 發送的asyncronously使用$阿賈克斯。如：

$("#ddlConsumer").change(function() { 
    var selected = $("#ddlConsumer :selected").text(); 
    localStorage.setItem("selected", selected); 

    $.post('yourUrlAction', $('#TesteForm').serialize(), function() { 
     //Here you can manipulate the code after a successfull call 
    }); 
});

2 - 獲取後端值並將其作爲帖子結果發回。這個變化的基礎上，你正在使用作爲後端什麼技術，但在.NET MVC會是這樣：

[HttpPost] 
public ActionResult Index(string field) 
{ 
    ViewBag.Value = field; 
    return View(); 
}

並在視圖：

<input name="field" id="field" type="text" value="@ViewBag.Value" />

希望有所幫助。

來源

2016-07-27 18:17:08

jQuery的 - 下拉列表變爲空後更改和表單提交

回答

相關問題