問題描述

老實說，今天走到這一步后，我的大腦有點炸了.

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設置選擇下拉值的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！