Question

我想在刷新页面之后保留，这个div只显示在下拉列表中

现在它正常工作但是如果我刷新页面并且公司被选中了附加字段没有显示，我必须选择第一个选项而不是重新选择公司选项以便显示附加字段

我想要做的是在用户选择公司并刷新页面时保留附加字段。

这是我的ht ml结构

<select name="agencyselect" id="agencyselect">
<option value="0" selected="selected">Agency</option>
<option value="1">Company</option>
</select>
<div class="control-group" id="companyname" style="display:none;">
    <label class="control-label" for="companyname">Company Name</label>
    <div class="controls">
        <input id="s_companyname" type="text" name="s_companyname" value="" />
    </div>
</div>

和我的javascript

    window.onload = function () {
    document.getElementById('agencyselect').addEventListener('change', function () {
        if (this.value == 1) {
            document.getElementById('companyname').style.display = 'block';
        } else {
            document.getElementById('companyname').style.display = 'none';
        }
    }, false)
};

请注意，我不想使用jquery

演示： http://jsfiddle.net/QTdS4/

Answer 1

这是一个快速实施

$(document).ready(function(){
  $("#agencyselect").val(localStorage.getItem("selectedPreference"));
   if (localStorage.getItem("selectedPreference") == "1") {
        $('#companyname').css({"display":'block'});
    } else {
         $('#companyname').css({"display":'none'});
   }

  $("#agencyselect").on("change",function(e){
     console.log($(this).val());
     localStorage.setItem("selectedPreference",$(this).val());
  });

});

http://jsfiddle.net/La9vF/2/

Answer 2

我认为我们需要将用户选择的值保存到某个地方（例如查询字符串），并在刷新页面时恢复。

试试这个：

// Get name/value pair from query string
function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

// Set name/value pair to query string
function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}

document.addEventListener('DOMContentLoaded', function () {
    var agent = document.getElementById('agencyselect');
    var company = document.getElementById('companyname');

    agent.addEventListener('change', function () {
        window.location.href = updateQueryStringParameter(window.location.href, "agentId", this.value);
    }, false);

    var agentId = getParameterByName("agentId");
    agent.value = agentId;
    if (agentId == 1) {
        company.style.display = 'block';
    } else {
        company.style.display = 'none';
    }
});

Answer 3

这里有一个HTML5 sessionStorage并且没有jQuery的实现：

window.onload = function () {

  var agencySelect = document.getElementById('agencyselect'),
      companyName = document.getElementById('companyname');

  console.log(sessionStorage.agencyselect);

  if (sessionStorage.agencyselect == 1) {
    agencySelect.selectedIndex = 1;
    companyName.style.display = 'block';
  }

  agencySelect.addEventListener('change', function () {
    sessionStorage.agencyselect = agencySelect.value;

    if (this.value == 1) {
      companyName.style.display = 'block';
    } else {
      companyName.style.display = 'none';
    }
  }, false);

};

工作演示：http://jsfiddle.net/QTdS4/1/

有关Web存储（sessionStorage）的更多信息，请参阅W3C规范：http://dev.w3.org/html5/webstorage/#introduction

仅在下拉选择中显示div，并在页面刷新后保留它

3 个答案: