jQuery cookies设置页面刷新后选择下拉值

问题描述

老实说，今天到目前为止，我的大脑已经变得非常油腻。

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:

我使用这个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" />

所以如果是第一个用户在页面上的时间并且他们没有点击任何下拉列表，第一个值将为空而不是请选择。

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