Question

目前我有一些选择下拉列表的菜单。我已经做到了，所以无论在中间下拉菜单中选择了什么选项，它都会显示为底部下拉列表的标题/标签。这是我在多个html页面上显示的div。每次我更改中间选项时，底部的标题都会成功更改为我想要的内容但是一旦加载页面，底部标题/标签就会消失并返回到默认空白。如何使标题/标签即使在页面加载后也应如此？

HTML：

<div class="form-group">
    <label class="col-md-4 control-label">Section:</label>
    <div class="col-md-8">
        <select id="middle" class="form-control">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
    </div>
</div>

<br /><br />

<div class="form-group">
    <label class="col-md-4 control-label" id="output"></label>
    <div class="col-md-8">
    <select id="bottom" class="form-control">
        <option>11</option>
        <option>12</option>
        <option>13</option>
    </select>
    </div>
</div>

jQuery的：

$('#middle').change(function() {
    $('#output').text($(this).find(":selected").text());
});

Answer 1

刷新页面后，Jquery不会保存数据或缓存数据。这就是为什么你没有得到这些价值观。

要恢复它，您需要使用Html5 $ cookie。请谷歌了解它的用途。

Answer 2

如果您只希望#bottom的标题在每个页面加载上说1，与#middle select所说的相同，则可以使用此：

$('#middle').change(function() {
  $('#output').text($(this).find(":selected") ? $(this).find(":selected").text() : $(this).find(":first").text());
}).change(); //trigger change on pageload

＆＃13;

$('#middle').change(function() {
  $('#output').text($(this).find(":selected") ? $(this).find(":selected").text() : $(this).find(":first").text());
}).change();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
  <label class="col-md-4 control-label">Section:</label>
  <div class="col-md-8">
    <select id="middle" class="form-control">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
    </select>
  </div>
</div>

<br /><br />

<div class="form-group">
  <label class="col-md-4 control-label" id="output"></label>
  <div class="col-md-8">
    <select id="bottom" class="form-control">
      <option>11</option>
      <option>12</option>
      <option>13</option>
    </select>
  </div>
</div>

＆＃13;

＆＃13; jsfiddle：https://jsfiddle.net/hgep8hcg/

此代码检查是否存在选定的option，如果是，则使用其值。如果没有选定的option，则会使用第一个option的值 此代码在.text()内，可能看起来有点奇怪。如果您想了解它，请点击该链接。

如果您想要存储所选价值，请阅读：

最简单的选项是ternary operator，前提是浏览器支持足以达到您的目标 （我在这里使用localStorage，这样每个人localStorage都不会因为测试值而变得臃肿。）

这样可以解决问题：

$("#middle").change(function() {
  var value = $(this).find(":selected").text();
  $("#output").text(value);
  sessionStorage.setItem(this.id, value);
}).val(function(){return (sessionStorage.getItem(this.id) ? sessionStorage.getItem(this.id) : $(this).find("option:first").text());}).change(); //set values on pageload

jsfiddle：sessionStorage
codepen：https://jsfiddle.net/k3htre4d/2/

在change处理程序中，我使用localStorage ID作为密钥设置select，select＆＃39; s text-value as value。
在change处理程序之后，我使用与select ID匹配的localStorage密钥设置了select的值，如果该密钥存在。如果它不存在，我会使用select的第一个option文本。
这一行：return (... ? ... : ...);。如果您想了解它，请点击该链接。

可能更有效：

$("#middle").change(function() {
  $("#output").text($(this).find(":selected").text());
});

$(".form-control").change(function() {
  sessionStorage.setItem(this.id, $(this).find(":selected").text()); //store select's value on change
}).each(function() {
  if (sessionStorage.getItem(this.id)) {$(this).val(sessionStorage.getItem(this.id));} //set select's value on pageload
}).change(); //trigger change on pageload

jsfiddle：https://codepen.io/anon/pen/OgOdLZ?editors=1010
codepen：ternary operator

在此代码中，select的所有form-control的值都存储在localStorage change上。所有select根据其ID在localStorage中获取自己的密钥。所以现在你不必为每一个select复制处理程序。只需确保您希望存储值的每个select，包含form-control类（或您选择的任何类）。
使用此原则，您还可以仅为要存储值的select添加一个额外的类，而不是将该类用于处理程序而不是.form-control。
仅由#middle选择使用的代码位于单独的处理程序中。

jQuery在其他地方显示选择的文本，并在页面加载后消失

2 个答案:

如果您想要存储所选价值，请阅读：

可能更有效：