javascript-jQuery cookie设置在页面刷新后选择下拉值

2019-12-10 07:48:03 阅读：220 来源： 互联网

老实说,今天我走了这么远后,我的脑子反而被炸了.

我正在尝试使用此插件在页面上保存多个选择下拉菜单的状态：

http://plugins.jquery.com/project/cookies

我正在使用此jQuery根据其ID为不同的标题下拉列表设置Cookie：

$(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时,如果希望将其默认设置为“请选择”,则选择下拉列表将显示空白选项.

我正在使用的示例HTML：

<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而不是“请选择”.

解决方法:

我将更改此部分,如果cookie不存在,请不要与下拉菜单混淆：

$(".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(浏览器默认),则将不予处理.

标签：jquery-plugins,javascript,jquery
来源： https://codeday.me/bug/20191210/2100192.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-jQuery cookie设置在页面刷新后选择下拉值