javascript - 在javascript下拉框中显示值(存储在本地存储中)

Question

我正在开发一个phonegap项目，其中我有一个来自后端的国家/地区的动态列表。前任。美国、加拿大、印度。我必须将美国显示为默认选择值，该值工作正常。现在的问题是 - 当我从下拉框中选择加拿大并且如果我退出(强制关闭设置)时，该值将存储在本地存储/数据库中，但它不会在下拉窗口中显示为选定值。 我搜索了显示存储在数据库中的动态值并在下拉列表中显示。

请帮忙。提前致谢。

这是我的代码:

    if(window.localStorage.getItem("my_country") == '' || window.localStorage.getItem("my_country")== null )
            {                
                window.localStorage.setItem("my_country",'US');
                window.localStorage.setItem("my_country_name",'USA');
                var ccode = window.localStorage.getItem("my_country");
            }
            else
            {                   
                var ccode = window.localStorage.getItem("my_country");   //previously selected country     
            }


        jQuery.each(result.d.listCountrys, function(key,value)
            {                       
                if(ccode==value.CountryCode)  //to get the previously stored value and that will become selected in drdwn.
                {
                    jQuery("#drpDoctorSearchCountry").append("<option class='ccmp'  value='"+value.CountryCode+"' Selected>" + value.strCountryName+ "</option>");
                    jQuery("#drpBillingCountry").append("<option class='ccmp'  value='"+value.CountryCode+"' Selected>" + value.strCountryName+ "</option>");
                }   
                else
                {   
                    jQuery("#drpDoctorSearchCountry").append("<option class='ccmp' value='"+value.CountryCode+"'>" + value.strCountryName+ "</option>");
                    jQuery("#drpBillingCountry").append("<option class='ccmp'  value='"+value.CountryCode+"'>" + value.strCountryName+ "</option>");                    
                }
            }); 

Answer 1

编辑:

我在编辑问题之前就开始写这个答案。变量名称将不匹配。但人们应该明白这一点。

<小时/>

假设:

当用户选择(可能单击)一个选项(在选择字段中)时，其值存储在 localStorage 中。在 localStorage.cPref 下说.

如果用户(之前)选择了这样的值，则它应该在下拉列表中显示为默认(第一个)值。

解决方案:

在显示选项之前，您应该检查用户的国家/地区首选项是否已在 localStorage 中.

如果是这样，请将该国家/地区移动到(国家/地区列表)的开头。

如果不是这样，则意味着用户尚未选择任何选项，无需进行任何更改。

最好使用接受国家/地区列表(数组)的 JavaScript 函数，而不是在 HTML 中对国家/地区选项进行硬编码。

操作此列表然后将选项写入 HTML 比在渲染选项后对其进行更正要好(如果需要进行此类更正。)

代码:

function renderOptions (cList) { // cList is an array of countries.
  var i, selectNode, optionNode;
    if (localStorage.cPref) { // cPref stores the (previously) selected country.
      i = cList.indexOf(localStorage.cPref);
      if (i > -1) {
        cList = [cList[i]].concat(cList.slice(0, i)).concat(cList.slice(i+1));
        // Moving cPref to the front of cList.
      }
    }
  selectNode = document.createElement('select');
  for (i = 0; i < cList.length; i += 1) {
    optionNode = document.createElement('option');
    optionNode.value = cList[i];
    optionNode.innerHTML = cList[i];
    selectNode.appendChild(optionNode);
  }
  document.body.appendChild(selectNode); 
  // you'd perhaps want to use insertBefore(..) instead.
  return;
}
renderOptions(['USA', 'Canada', 'India', 'Mexico'])
// The function call may be hard-coded in HTML or produced by a script (say python.)
            

就是这样!万岁...

问题:

如果客户端禁用 JavaScript，他甚至看不到选择字段!确保将选择选项硬编码在 <noscript> 中标签。

希望我有所帮助。 :)