javascript - Jquery 和 html5 session 存储显示 json 下拉框中选择的最后状态

Question

我有以下下拉列表代码，可以从 JSON 数据动态填充。我将日期存储在 html5 session 存储中。我需要记住并显示下拉列表中“选择”的最后一项。

目前它错误地显示为 <option value="">Select Country</option>

   <select name="country" class="dropdownselect" >
         <option value="">Select Country</option>   
             <option value="Afghanistan" selected="selected">Afghanistan</option>
             <option value="Albania">Albania</option>
             <option value="Algeria">Algeria</option>
             ....
             ......
     </select>

例如，如果用户选择了“阿尔巴尼亚” 基于 localstorage 值我想显示为 <option value="Albania" selected>Albania</option> 我希望它记住并在用户返回页面时显示最后选择的项目，只要它显示最后选择的项目。

JS //这会动态填充下拉国家列表 AJAX 服务

    window.getCountry = function(URL) {       
        var country =URL +"/services/GetCountry";
        console.log("country " +country); 
        $.ajax({
            url: country,
            dataType: "json",
             cache: false,
            success: function(data, textStatus, jqXHR) {

                $('#country').empty();
                $('#country').append($('<option>').text("-Select Country-").attr('value', ''));    
                jQuery.each(data, function(k,v) {

   $('#country').append($('<option>').text(v.nameName).attr('value', v.countryFullname));

                 });       
        },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log('FAILED to get  JSON from AJAX call' + jqXHR + textStatus + errorThrown);

            }
        });       

       }   

     $(document).ready(function() {
        var item = window.localStorage.getItem('country');
      console.log("item "+ item);
        $('select[name=country]').val(item);

        $('select[name=country]').change(function() {
           window.localStorage.setItem('country', $(this).val());
          console.log("item "+ item);



        });

        getCountry(some url);//this create the dropw down list dynamically

    }); 

HTML BIT - 这会动态填充

问题是无论我上次选择什么，它总是显示为“选择国家/地区”。有人可以帮忙吗？

Answer 1

尝试使用.prop()方法代替

var item = 'Albania';
$('select[name="country"] option[value="' + item + '"]').prop('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="country" class="dropdownselect" >
  <option value="">Select Country</option>   
  <option value="Afghanistan">Afghanistan</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
</select>