jQuery를 사용하여 드롭 다운 목록에서 선택한 항목을 설정하는 방법

Question

다음 jQuery 함수를 사용하여 드롭 다운 목록을 채 웁니다. 사용자가 항목을 선택하면 선택한 변수를 세션 변수에 저장하고 임포트 된 변수를 통해 세션 변수에서 데이터를 가져올 수 있습니다 (selectedApp).

문제는 포스트 백 이후에 제출을 클릭하기 전에 선택한 항목으로 목록을 다시 설정할 수 없다는 것입니다.

드롭 다운 목록에서 선택한 항목을 선택한 항목으로 설정하려면 어떻게해야합니까?

  var selectedApp = $('#selectedApplication').val(); 

      $.getJSON("/ApplicationSettings/Applications/List", function(data) { 
       var items = "<option>----------- Select Application to Configure ----------</option>"; 
       $.each(data, function(i, application) { 
        items += "<option value='" + application.Value + "'>" + application.Text + "</option>"; 
       }); 
       $("#Applications").html(items); 
      }); 

Answer 1

당신은 할 당신의 each의 내부를 변경할 수 있습니다

selecteApp 가정

items += "<option value='" + application.Value + "' " + (selectedApp === application.Text ? "selected" : "") + ">" + application.Text + "</option>"; 

는 텍스트 값을 보유하고 있습니다. 그렇지 않으면 application.Value을 사용하여 비교하십시오.

Answer 2

각 옵션의 선택한 상태가 Ajax 끝점에서 리턴합니까? 나는이 시점에서 뭔가를 누락하지 않는 서버가 알고 있어야하기 때문에 옵션은 당신의 JSON 그냥이

에 수정이

[ 
    {"Value": 1, "Text": "One"} 
    , {"Value": 2, "Text": "two"} 
    // etc 
] 

처럼 보이는 것, 지금

선정 된의

[ 
    {"Value": 1, "Text": "One", "Selected": false} 
    , {"Value": 2, "Text": "two", "Selected": true} 
    // etc 
] 

그리고 콜백이 값을 적절하게

$.each(data, function(i, application) { 
    var selected = application.Selected? ' selected' : ''; 
    items += "<option value='" + application.Value + "'" + selected + ">" + application.Text + "</option>"; 
}); 

Answer 3

감사를 사용하도록! 이것은 내가 끝낸 것입니다.

 $.getJSON("/ApplicationSettings/Applications/List", function(data) 
     { 
      var items = "<option>----------- Select Application to Configure ----------</option>"; 
      $.each(data, function(i, application) 
      { 
       var selected = (application.Value == selectedApp) ? 'selected' : ''; 
       items += "<option value='" + application.Value + "'" + selected + ">" + application.Text + "</option>"; 
      }); 
      $("#Applications").html(items); 
     });