![](/img/trans.png)
[英]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.