divを非表示にしてからページをリロードした後にdivを保持

Question

選択ドロップダウンから選択が行われたときにdivを表示するjqueryスクリプトがあります。それはうまく動作しますが、私はどのようにページをリロードした後、ページにdivを保持するのだろうかと思っていた。ここではスクリプトは次のとおりです。

$(document).ready(function() { 
 
    $("select").change(function() { 
 
    var color = $(this).val(); 
 
    if (color == "Yes") { 
 
     $(".box").not(".Yes").hide(); 
 
     $(".Yes").show(); 
 
    } else if (color == "No") { 
 
     $(".box").not(".No").hide(); 
 
     $(".No").show(); 
 
    } else { 
 
     $(".box").hide(); 
 
    } 
 
    }); 
 

 

 
});

<div> 
 
Is this to be a subdomain?<select name="setweb"> 
 
     
 

 
\t \t <option selected disabled>Please Select</option> 
 
     <option value="Yes">Yes</option> 
 
     <option value="No">No</option> 
 

 
    </select> 
 
</div> 
 
<br /> 
 

 
<div class="Yes box" style="display:none"> 
 
<input type='text' class='text' name='business' size='20' />Enter your subdomain in the text box. 
 

 

 

 

 

 
</div> 
 
<div class="No box" style="display:none"> 
 
<input type='text' class='text' name='business' size='20' />Enter your domain in the text box. 
 
</div> 
 

 

 

 

 
<br/>

あなたの助けをありがとうございました。

Answer 1

は、ページのリロード中にいくつかのデータを保存するためにクッキーを使用することができます

$(document).ready(function() { 
 
\t if(localStorage.getItem("elementToShow")) { 
 
    \t $(localStorage.getItem("elementToShow")).show(); 
 
    } 
 
    $("select").change(function() { 
 
    var color = $(this).val(); 
 
    if (color == "Yes") { 
 
     $(".box").not(".Yes").hide(); 
 
     localStorage.setItem("elementToShow", ".Yes"); 
 
     $(".Yes").show(); 
 
    } else if (color == "No") { 
 
     $(".box").not(".No").hide(); 
 
     localStorage.setItem("elementToShow", ".No"); 
 
     $(".No").show(); 
 
    } else { 
 
     $(".box").hide(); 
 
    } 
 
    }); 
 

 

 
});

<div> 
 
Is this to be a subdomain?<select name="setweb"> 
 
     
 

 
\t \t <option selected disabled>Please Select</option> 
 
     <option value="Yes">Yes</option> 
 
     <option value="No">No</option> 
 

 
    </select> 
 
</div> 
 
<br /> 
 

 
<div class="Yes box" style="display:none"> 
 
<input type='text' class='text' name='business' size='20' />Enter your subdomain in the text box. 
 

 

 

 

 

 
</div> 
 
<div class="No box" style="display:none"> 
 
<input type='text' class='text' name='business' size='20' />Enter your domain in the text box. 
 
</div> 
 

 

 

 

 
<br/>

Answer 2

ローカルストレージを使用します。そのため、他の簡単な解決策はありません...

も参照してくださいhttps://www.w3schools.com/js/js_cookies.asp

あなたは変化にクッキーを設定することができ

document.cookie = "select=somevalue" 

、その後

$(document).ready(function() { 
    var select = document.cookie.split(";")[0] ? document.cookie.split(";")[0].split("=")[0] : null 

    if (select) { 
     // manually trigger the change 
    } 
}) 

編集1

"There i他の単純な解決策ではありません... "... ... localStorageを除いて：D @Nidhin Chandran