在javascript下拉框中显示值（存储在本地存储中）

Question

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

请帮助。提前致谢。

这是我的代码：

    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。

如果是，则将该国家/地区移至（国家/地区）列表的开头。

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

与其在 HTML 中硬编码国家选项，不如使用接受国家列表（数组）的 javascript 函数。

处理这个列表，然后将选项写入 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> 标记内对选择选项进行硬编码。

希望我能帮上忙。 :)