如何使用JS保留下拉列表的值?
How to retain a value of dropdown using JS?
我有一个带有 1 个提交按钮的三个下拉菜单。现在,我试图在用户单击输入提交后保留每个下拉列表的值。但是我的 Jquery 不工作。当用户单击它时,我使用 PHP 显示下拉菜单的输出。
注意:当用户点击输入提交时,页面刷新。
如何解决这个问题?参见 plunker
JS:
$(document).ready(function(){
$('#dropdown').change(function(){
var option = $(this).find('option:selected').val();
$('#dropdown').val(option);
});
});
如果用户要刷新页面,最好的办法是让服务器发送用户刚刚在新页面加载时提交的值。
如果由于某种原因无法做到这一点,您可以使用 localStorage:
$(document).ready(function(){
var prevVal = localStorage.getItem('selectValue');
prevVal && $('#dropdown').val(prevVal);
$('#dropdown').change(function(){
var option = $(this).val();
localStorage.setItem('selectValue', option);
});
});
请记住,并非所有浏览器都支持此 API。
编辑:如果不需要浏览器刷新,可以使用Ajax:
// ...
$('#myForm').submit(function (event) {
event.preventDefault();
var option = $('#dropdown').val();
var fd = new FormData();
fd.append('dropdown', option);
$.ajax('/path/to/form/target/', {
method: 'POST',
formData: fd
});
// ...
});
//...
您可以使用 select
元素中的 model
属性轻松获取值。
首先像这样添加一个onclick函数
<input type="submit" name="submit" value="Submit" onclick="getValues()"/>
然后获取按钮提交时的值(完整代码)Plunkr
我查看了您的代码,您的选择框渲染设置方式我们必须显式调用 updateSelect()
函数才能使选项正常工作。此函数使您的选择框 "dynamic".
var first = localStorage.getItem("firstDropDown");
var second = localStorage.getItem("secondDropDown");
var third = localStorage.getItem("thirdDropDown");
if(first !== null && second !== null && third !== null) {
setValues(); //this should come after getting the values above
}
function getValues() {
var first = document.getElementsByTagName("SELECT")[0].getAttribute("model");
var second = document.getElementsByTagName("SELECT")[1].getAttribute("model");
var third = document.getElementsByTagName("SELECT")[2].getAttribute("model");
localStorage.setItem("firstDropDown", first);
localStorage.setItem("secondDropDown", second);
localStorage.setItem("thirdDropDown", third);
}
//on load when this function is called globally, the values from the localStorage will be set to the dropdown values.
function setValues() {
//for first dropdown
document.getElementsByTagName("SELECT")[0].setAttribute("model", first);
document.getElementsByTagName("SELECT")[0].value = first;
updateSelect(document.getElementsByTagName("SELECT")[0]);
//for second dropdown
document.getElementsByTagName("SELECT")[1].setAttribute("model", second);
document.getElementsByTagName("SELECT")[1].value = second;
updateSelect(document.getElementsByTagName("SELECT")[1]);
//for third dropdown
document.getElementsByTagName("SELECT")[2].setAttribute("model", third);
document.getElementsByTagName("SELECT")[2].value = third;
updateSelect(document.getElementsByTagName("SELECT")[1]);
}
要保留该值,您别无选择,只能像这样使用 window.localStorage
-
localStorage.setItem("firstDropDown", first);
localStorage.setItem("secondDropDown", second);
localStorage.setItem("thirdDropDown", third);
然后取值
var first = localStorage.getItem("firstDropDown");
var second = localStorage.getItem("secondDropDown");
var third = localStorage.getItem("thirdDropDown");
使用所有选项的本地存储;
$("#dropdown").change(function(){
var html=$("#dropdown").html();
localStorage.setItem("myapp-selectval",html);
localStorage.setItem("myapp-selectvalselected",$("#dropdown").val()); //to retain selected value
})
正在加载文档;
window.onload=function()
{
if(localStorage.getItem("myapp-selectval")!="" && localStorage.getItem("myapp-selectval")!=undefined)
{
$("#dropdown").html(localStorage.getItem("myapp-selectval"));
$("#dropdown").val(localStorage.getItem("myapp-selectvalselected")); //to get previously selected value
}
}
正如我在评论中所说,这不是一个好的解决方案。
虽然我假设 OP 的问题要求 JS 解决方案,但我确实想为 table 带来其他东西,因为我也在寻找解决同样问题的方法。然而,我最终以一种我认为令人满意的方式解决了它。
在我的例子中,我使用 Flask 作为后端,但我相信解决方案至少应该与其他用例相似。
在下拉菜单所在的 HTML 上,我从后端传递了一个变量,该变量最初设置为我选择的某个默认值。我们称这个变量为default_var_set_in_backend。这最终将被馈送到 HTML 并且如下所示:
<select name="some_name_you_want" onchange="this.form.submit()">
<option selected="selected">{{ default_var_set_in_backend }}</option>
一旦用户对下拉值进行了更改(在我的例子中是 GET 请求),我将变量 default_var_set_in_backend 更新为等于这个新的选择。现在,HTML 将在页面刷新后反映用户所做的最新选择。
我有一个带有 1 个提交按钮的三个下拉菜单。现在,我试图在用户单击输入提交后保留每个下拉列表的值。但是我的 Jquery 不工作。当用户单击它时,我使用 PHP 显示下拉菜单的输出。
注意:当用户点击输入提交时,页面刷新。
如何解决这个问题?参见 plunker
JS:
$(document).ready(function(){
$('#dropdown').change(function(){
var option = $(this).find('option:selected').val();
$('#dropdown').val(option);
});
});
如果用户要刷新页面,最好的办法是让服务器发送用户刚刚在新页面加载时提交的值。
如果由于某种原因无法做到这一点,您可以使用 localStorage:
$(document).ready(function(){
var prevVal = localStorage.getItem('selectValue');
prevVal && $('#dropdown').val(prevVal);
$('#dropdown').change(function(){
var option = $(this).val();
localStorage.setItem('selectValue', option);
});
});
请记住,并非所有浏览器都支持此 API。
编辑:如果不需要浏览器刷新,可以使用Ajax:
// ...
$('#myForm').submit(function (event) {
event.preventDefault();
var option = $('#dropdown').val();
var fd = new FormData();
fd.append('dropdown', option);
$.ajax('/path/to/form/target/', {
method: 'POST',
formData: fd
});
// ...
});
//...
您可以使用 select
元素中的 model
属性轻松获取值。
首先像这样添加一个onclick函数
<input type="submit" name="submit" value="Submit" onclick="getValues()"/>
然后获取按钮提交时的值(完整代码)Plunkr
我查看了您的代码,您的选择框渲染设置方式我们必须显式调用 updateSelect()
函数才能使选项正常工作。此函数使您的选择框 "dynamic".
var first = localStorage.getItem("firstDropDown");
var second = localStorage.getItem("secondDropDown");
var third = localStorage.getItem("thirdDropDown");
if(first !== null && second !== null && third !== null) {
setValues(); //this should come after getting the values above
}
function getValues() {
var first = document.getElementsByTagName("SELECT")[0].getAttribute("model");
var second = document.getElementsByTagName("SELECT")[1].getAttribute("model");
var third = document.getElementsByTagName("SELECT")[2].getAttribute("model");
localStorage.setItem("firstDropDown", first);
localStorage.setItem("secondDropDown", second);
localStorage.setItem("thirdDropDown", third);
}
//on load when this function is called globally, the values from the localStorage will be set to the dropdown values.
function setValues() {
//for first dropdown
document.getElementsByTagName("SELECT")[0].setAttribute("model", first);
document.getElementsByTagName("SELECT")[0].value = first;
updateSelect(document.getElementsByTagName("SELECT")[0]);
//for second dropdown
document.getElementsByTagName("SELECT")[1].setAttribute("model", second);
document.getElementsByTagName("SELECT")[1].value = second;
updateSelect(document.getElementsByTagName("SELECT")[1]);
//for third dropdown
document.getElementsByTagName("SELECT")[2].setAttribute("model", third);
document.getElementsByTagName("SELECT")[2].value = third;
updateSelect(document.getElementsByTagName("SELECT")[1]);
}
要保留该值,您别无选择,只能像这样使用 window.localStorage
-
localStorage.setItem("firstDropDown", first);
localStorage.setItem("secondDropDown", second);
localStorage.setItem("thirdDropDown", third);
然后取值
var first = localStorage.getItem("firstDropDown");
var second = localStorage.getItem("secondDropDown");
var third = localStorage.getItem("thirdDropDown");
使用所有选项的本地存储;
$("#dropdown").change(function(){
var html=$("#dropdown").html();
localStorage.setItem("myapp-selectval",html);
localStorage.setItem("myapp-selectvalselected",$("#dropdown").val()); //to retain selected value
})
正在加载文档;
window.onload=function()
{
if(localStorage.getItem("myapp-selectval")!="" && localStorage.getItem("myapp-selectval")!=undefined)
{
$("#dropdown").html(localStorage.getItem("myapp-selectval"));
$("#dropdown").val(localStorage.getItem("myapp-selectvalselected")); //to get previously selected value
}
}
正如我在评论中所说,这不是一个好的解决方案。
虽然我假设 OP 的问题要求 JS 解决方案,但我确实想为 table 带来其他东西,因为我也在寻找解决同样问题的方法。然而,我最终以一种我认为令人满意的方式解决了它。
在我的例子中,我使用 Flask 作为后端,但我相信解决方案至少应该与其他用例相似。
在下拉菜单所在的 HTML 上,我从后端传递了一个变量,该变量最初设置为我选择的某个默认值。我们称这个变量为default_var_set_in_backend。这最终将被馈送到 HTML 并且如下所示:
<select name="some_name_you_want" onchange="this.form.submit()">
<option selected="selected">{{ default_var_set_in_backend }}</option>
一旦用户对下拉值进行了更改(在我的例子中是 GET 请求),我将变量 default_var_set_in_backend 更新为等于这个新的选择。现在,HTML 将在页面刷新后反映用户所做的最新选择。