jQuery - 変更後にドロップダウンリストが空になります。

Question

私は、ユーザーの選択後に新しいデータでページをリロードするドロップダウンを持っています。ドロップダウンで変更/選択と提出が行われると、ページの再読み込みとドロップダウンはとなります。となります。 は提出後にドロップダウンデータを保存し、ユーザが選択した内容を表示したいと考えています。事前に何か助けていただきありがとうございます。私はこれを初めて知りました。

$(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> 

Answer 1

ことの一つは、HTTPプロトコルはステートレスであるという事実です。 これは、フォームを送信した後は、ページが再読み込みされ、値が失われることを意味します。 これを解決するには、次の2つのことができます。

1 - を$ ajaxを使用して非同期に送信します。 Like：

$("#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" /> 

お役に立てば幸いです。