jQuery在其他位置顯示選擇文本，並在頁面加載后消失

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

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

 <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> 

jsfiddle： https ://jsfiddle.net/hgep8hcg/

• 此代碼檢查是否存在選定的option ，如果存在，則使用其值。 如果沒有選擇的option ，則使用第一個option的值。
  .text()這段代碼可能看起來有些怪異。 它稱為三元運算符 ，如果您想了解它，請單擊鏈接。

---

如果您要存儲選擇的值，請繼續閱讀：

如果瀏覽器支持足以滿足您的目標，則最簡單的選擇是localStorage 。
（我在這里使用sessionStorage ，只是為了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： https ://jsfiddle.net/k3htre4d/2/
codepen： https ：//codepen.io/anon/pen/OgOdLZ ？ editors = 1010

• 在您的change處理程序中，我將select的ID作為鍵，並將select的text-value用作值來設置localStorage 。
• 在change處理程序之后，我使用與select的ID匹配的localStorage密鑰（如果該密鑰存在）來設置select的值。 如果不存在，則使用select的first 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 ://jsfiddle.net/k3htre4d/1/
codepen： https ：//codepen.io/anon/pen/dRZayW ？ editors = 1010

• 在此代碼中，所有帶有form-control類的select的值都存儲在change localStorage中。 所有select根據其ID在localStorage獲得自己的密鑰。 因此，現在您不必為每個select都重復處理程序。 只要確保要存儲其值的每個select都具有類form-control （或您選擇的任何類）即可。
  使用此原理，您還可以將一個額外的類僅添加到您希望為其存儲值的select ，然后將該類用作處理程序，而不是.form-control 。
• 僅#middle選擇所使用的代碼在單獨的處理程序中。