[英]HTML & Javascript - make text appear when dropdown menu option selected
[英]Update dropdown menu text with selected option text after page redirect
您好,我想在頁面重定向和下拉列表重新加載后,使用選定的選項文本更新下拉列表文本。 這是我的代碼
<div class="sorting-option">
<select id="selectdropdown" class="dropdown-select">
<option value="">Recommended Items</option>
<option value="?sort1desc=F&sort1=Item_NAME">Name (A-Z)</option>
<option value="?sort1desc=T&sort1=Item_NAME">Name (Z-A)</option>
<option value=".f?sort1desc=F&sort1=Item_ONLINECUSTOMERPRICE">Price (Low-
High)
</option>
<option value=".f?sort1desc=T&sort1=Item_ONLINECUSTOMERPRICE">Price (High
Low)
</option>
</select>
</div>
當我從下拉菜單中選擇任何選項時,它將加載頁面並打開該選項的值部分中的鏈接。 每次頁面加載后,我只能看到推薦的項目選項文本,而不是我從下拉菜單中選擇的文本。 就像我選擇名稱(ZA)一樣,它應該在頁面加載后的下拉列表中更新為名稱(ZA)。
到目前為止,我已經嘗試過此代碼,但是沒有給我預期的結果
$(document).ready(function () {
$('#selectdropdown').change(function () {
location.href = $(this).val();
$("#selectdropdown option:selected").text();
});
});
您可以使用localStorage.getItem()
和localStorage.setItem();
保存選定的值,然后在准備功能中重新選擇該值。
https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage#localStorage
$(document).ready(function() {
var opt = document.querySelector('#selectdropdown option[value="' + localStorage.getItem('selectdropdownselectedvalue') + '"]');
if (opt) opt.selected = true;
$('#selectdropdown').change(function() {
localStorage.setItem('selectdropdownselectedvalue', document.querySelector('#selectdropdown').value);
location.href = $(this).val(); //instant redirect
//$( "#selectdropdown option:selected" ).text(); <-- not possible because js is already about to redirecting
});
});
工作示例(無jquery):
<select id="selectdropdown" onchange="changed(this)">
<option>nothing</option>
<option value="2">2</option>
<option value="4">4</option>
<option value="6">6</option>
<option value="8">8</option>
</select>
<script>
var opt = document.querySelector('#selectdropdown option[value="' + localStorage.getItem('selectdropdownselectedvalue') + '"]');
if (opt) {
opt.selected = true;
}
function changed(dd) {
localStorage.setItem('selectdropdownselectedvalue', document.querySelector('#selectdropdown').value);
window.location = location.href;
}
</script>
您可以在<select>
中的選項中使用selected屬性。 將名稱屬性置於select中,然后在提交表單時,在頁面加載后獲取相同的屬性,並放置一個條件,因此選擇該項目。
<if selectdropdown = "sort1desc=F&sort1=Item_NAME"> selected<endif>
喜歡 :
<div class="sorting-option">
<select id="selectdropdown" class="dropdown-select" name= "selectdropdown">
<option value="">Recommended Items</option>
<option value="?sort1desc=F&sort1=Item_NAME" <if selectdropdown = "sort1desc=F&sort1=Item_NAME"> selected<endif> >Name (A-Z)</option>
<option value="?sort1desc=T&sort1=Item_NAME">Name (Z-A)</option>
</select>
</div>
將所有選項都設為相同。
您可以按照以下步驟。
在網址中傳遞所選的值。
頁面加載后,您可以從URL中檢查這些值以自動選擇該值。
$(document).ready(function() { $("#social").change(function(event) { var target_url = $(this).val(); //pass the target url in the url scope var redirect_url = target_url + "?social=" + target_url; location.href = redirect_url; }); //on page load get the url values to select it from dropdown. var urlvars = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&'); var keys = urlvars[0].split('='); var default_select = keys[1]; $('#social').val(default_select); });
<form> <select id="social"> <option value="http://localhost/index.cfm">Default</option> <option value="http://localhost/a.cfm">Google</option> <option value="http://localhost/b.cfm">Facebook</option> </select> </form>
您可以檢查url參數中的sort1desc並將值分配給選擇框。 這是jQuery代碼。
$(document).ready(function () {
var sortParam = getUrlParameter("sort1desc");
alert(sortParam);
$('#selectdropdown option').each(function() {
var str = $(this).attr('value');
if(str.indexOf("sort1desc="+sortParam) >= 0) {
$('#selectdropdown').val($(this).attr('value'));
}
});
$('#selectdropdown').change(function () {
location.href = $(this).val();
$("#selectdropdown option:selected").text();
});
});
function getUrlParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables[i].split('=');
if (sParameterName[0] == sParam)
{
return sParameterName[1];
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.