页面刷新后jQuery cookie设置选择下拉值 [英] jQuery cookies setting select drop down value after page refresh

问题描述

老实说，今天走到这一步后，我的大脑有点炸了.

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设置选择下拉值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！