取消隱藏div然後在頁面重新載入後保留div

我有一個jQuery腳本，當從選擇下拉菜單中進行選擇時，會顯示div。它工作正常，但我想知道如何在頁面重新加載後保留在頁面上的div。下面是該腳本：取消隱藏div然後在頁面重新載入後保留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/>

感謝你的幫助。

來源

2017-06-14 saco

您需要將更改存儲在cookie或localstorage中的某處。 – j08691

或者用PHP執行基本的GET或POST請求... – hallleron

使用本地存儲

$(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/>

來源

2017-06-14 13:41:17

嗨，本地存儲解決方案工作得很好，但是當我重新加載頁面並且沒有從下拉列表欄中選擇時，它仍然顯示div。如果列表欄沒有任何價值，我該如何隱藏div？ – saco

您可以使用Cookie來存儲頁面重載內的一些數據。沒有對於其他簡單的解決方案...

參見https://www.w3schools.com/js/js_cookies.asp

你可以改變設置cookie的

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

「有我這不是其他簡單的解決方案......「......除了localStorage：D @Nidhin Chandran

來源

2017-06-14 13:41:30

好的，非常感謝你的幫助 – saco

取消隱藏div然後在頁面重新載入後保留div

回答

相關問題