LocalStorage -下拉菜单
LocalStorage -下拉菜单
提问于 2020-09-16 19:26:51
我有一个问题，本地存储保存第一个下拉菜单选项，而不是第二个和第三个。需要在HTML和JS中编辑或添加的内容。
var init = function (){
//an ugly warning to users without localStorage support
if(!window.localStorage){
$('body').prepend('Sorry, you browser does not support local storage');
return false;
}
var sel = $('select'),
but = $('button');
var clearSelected = function(){
sel.find(':selected').prop('selected', false);
}
if(localStorage.getItem('pref')){
var pref = localStorage.getItem('pref');
clearSelected();
//set the selected state to true on the option localStorage remembers
sel.find('#' + pref).prop('selected', true);
}
var setPreference = function(){
//remember the ID of the option the user selected
localStorage.setItem('pref', sel.find(':selected').attr('id'));
};
var reset = function(){
clearSelected();
localStorage.setItem('pref', undefined);
}
sel.on('change', setPreference);
but.on('click', reset);
};
$(document).ready(init); <head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="2.js"></script>
</head>
<select>
<option selected></option>
<option id="opt1">1</option>
<option id="opt2">2</option>
<option id="opt3">3</option>
<option id="opt4">4</option>
</select>
<br></br>
<select>
<option selected></option>
<option id="opt5">5</option>
<option id="opt6">6</option>
<option id="opt7">7</option>
<option id="opt8">8</option>
</select>
回答 2
Stack Overflow用户
发布于 2020-09-16 19:47:25
var sel = $('select'),会选择这两个下拉列表。
将id添加到下拉列表中
<select id="first">将setPreference更改为以下内容
var setPreference = function () {
//remember the ID of the option the user selected
localStorage.setItem('pref', this.value);
};并相应地调整本地存储检索逻辑。
Stack Overflow用户
发布于 2020-09-16 20:19:37
我做了更改，但是现在它们都不能保存。我为我的知识水平道歉，但这是我的第一次，只是为了工作需要它。
var init = function (){
//an ugly warning to users without localStorage support
if(!window.localStorage){
$('body').prepend('Sorry, you browser does not support local storage');
return false;
}
var sel = $('select'),
but = $('button');
var clearSelected = function(){
sel.find(':selected').prop('selected', false);
}
if(localStorage.getItem('pref')){
var pref = localStorage.getItem('pref');
clearSelected();
//set the selected state to true on the option localStorage remembers
sel.find('#' + pref).prop('selected', true);
}
var setPreference = function () {
//remember the ID of the option the user selected
localStorage.setItem('pref', this.value);
};
var reset = function(){
clearSelected();
localStorage.setItem('pref', undefined);
}
sel.on('change', setPreference);
but.on('click', reset);
};
$(document).ready(init); <head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="2.js"></script>
</head>
<select id="first">
<option id="opt1">1</option>
<option id="opt2">2</option>
<option id="opt3">3</option>
<option id="opt4">4</option>
</select>
<br></br>
<select id="second">
<option id="opt5">5</option>
<option id="opt6">6</option>
<option id="opt7">7</option>
<option id="opt8">8</option>
</select>
<br></br>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63919040
复制相关文章
相似问题
腾讯云开发者
