jQuery cookies setting select drop down value after page refresh(页面刷新后jQuery cookie设置选择下拉值)
问题描述
老实说,今天走到这一步后,我的大脑有点炸了.
In all honesty my brain is rather fried after getting this far today.
我正在尝试使用此插件保存页面上多个选择下拉菜单的状态:
I am trying to save the state of multiple select drop downs on page using this plugin:
http://plugins.jquery.com/project/cookies
我正在使用这个 jQuery 根据 ID 为不同的标题下拉菜单设置 cookie:
I am using this jQuery to set cookies for the different title drop downs based on their ID:
$(document).ready(function() {
// hide 'Other' inputs to start
$('.jOther').hide();
// event listener on all select drop downs with class of jTitle
$(".jTitle").change(function(){
//set the select value
var val = $(this).val();
if(val != "Other") {
//$(this).nextAll('.jOther').hide();
$(this).parent().find(".jOther").hide();
} else {
//$(this).nextAll('.jOther').show();
$(this).parent().find(".jOther").show();
}
// Sets a cookie with named after the title field's ID attribute
$(this).cookify();
});
$(".jTitle").each(function(){
// get the id of each Title select drop down
var $titleId = $(this).attr('id');
// get the value of the cookie for each cookie created above in $(this).cookify()
var $cookieValue = $.cookies.get($titleId);
// if value is 'Other' make sure it is shown on page refresh
if ($cookieValue == 'Other') {
// Show the other input
$(this).parent().find(".jOther").show();
// set select value to 'Other'
$(this).val('Other');
} else {
// set to whatever is in the cookie
$(this).val($cookieValue);
}
});
});
发生的情况是,当没有设置 cookie 时,选择下拉菜单显示一个空白选项,而我希望它默认为请选择".
What is happening is that when no cookies are set the select drop down is displaying a blank option when i want it to default to 'Please select'.
我正在使用的 HTML 示例:
Sample HTML that i am using:
<td>
<select id="titleDepend1" class="inlineSpace jTitle">
<option value="Please select">Please select...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
<option value="Other">Other</option>
</select>
<label for="otherDepend1" class="inlineSpace jOther">Other</label>
<input type="text" class="text jOther" name="otherDepend1" id="otherDepend1" maxlength="6" />
因此,如果这是用户第一次进入页面并且他们没有点击任何下拉菜单,那么第一个值将为 null 而不是请选择".
So if it is the first time the user is on page and they have not clicked any drop downs the first value will be null rather than 'Please select'.
推荐答案
我会更改这部分,如果 cookie 不存在,请不要弄乱下拉列表:
I'd change this portion, if the cookie isn't there, just don't mess with the dropdown:
$(".jTitle").each(function(){
var $titleId = $(this).attr('id');
var $cookieValue = $.cookies.get($titleId);
if ($cookieValue == 'Other') {
$(this).parent().find(".jOther").show();
$(this).val('Other');
} else if($cookieValue) {
$(this).val($cookieValue);
}
});
唯一的变化是在最后添加一个if检查,看看是否有cookie...如果没有,下拉菜单中的默认位置0(浏览器默认)将保持不变.
The only change is to add an if check on the end, see if there is a cookie...if not the default position of 0 in the dropdown (browser default) will be left alone.
这篇关于页面刷新后jQuery cookie设置选择下拉值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:页面刷新后jQuery cookie设置选择下拉值
- 是否可以将标志传递给 Gulp 以使其以不同的方式 2022-01-01
- 如何调试 CSS/Javascript 悬停问题 2022-01-01
- 在不使用循环的情况下查找数字数组中的一项 2022-01-01
- 如何向 ipc 渲染器发送添加回调 2022-01-01
- 如何显示带有换行符的文本标签? 2022-01-01
- 为什么我的页面无法在 Github 上加载? 2022-01-01
- 我不能使用 json 使用 react 向我的 web api 发出 Post 请求 2022-01-01
- 从原点悬停时触发 translateY() 2022-01-01
- 使用 iframe URL 的 jQuery UI 对话框 2022-01-01
- 为什么悬停在委托事件处理程序中不起作用? 2022-01-01