Jquery - 将值传递给不同的选择选项

Question

我正在使用预订引擎，其中我在主页上有一个预订表单，用户填充它后，被重定向到预订页面。

以下是预订单的主页上一个屏幕截图：

“制作预定”按钮将您带到预订网页。从这种形式中，当用户选择孩子的数量时，额外的下拉列表被附加到表格上，这要求用户根据选择的数字来选择孩子/孩子的年龄。例如如果用户在2个孩子罢了，另外2个下拉列表将被追加：

在预订页面，预约形式呈现给他们的信息在网页上填写用户。下面是预订页面的屏幕截图：

要我现在的问题：注意预订页面上预订表格上面的屏幕截图怎么也设置为17的孩子的年龄。这是因为在选择两个孩子之后的主页上，我选择了9和17两个下拉列表。在预订页面的预订表格上（在点击“预订”按钮后），儿童年龄的两个下拉列表将被设置为上次选择的下拉选项的值。所以，比如在主页上我选择了4个孩子，额外的4个下拉列表将被添加到表格中，如果我选择了5,9,6,10，那么在重定向到预订页面时，所有的孩子4个孩子的年龄将设为10.

对于主页上的表格，我有一个div，我在追加年龄下拉列表。即对主页上的形式：

<div class = "display-text"></div><div id = "children-number" class="children-number"></div> 

在我的JavaScript文件

，我追加的股利如下：

$('select[name="gdlr-children-number[]"]').on('change', function(e){ 
     var children_num = e.target.value; 
     displayChildren(children_num); 


    }); 

function displayChildren(children_num) 
    { 
     var min_num = 0; 
     var max_num = 18; 
     var options = ''; 

     options += '<select name = "age" class = "children-num">'; 
     options += '<option value = ""></option>'; 

     if(children_num == 0) 
     { 
      var display = $('.display-text').css('display', 'none'); 
     } 
     else if(children_num == 1) 
     { 
      var display = $('.display-text').html('<p>Age of child at check-out</p>').css('display', 'block'); 
     } 
     else if(children_num > 1) 
     { 
      var display = $('.display-text').html('<p>Ages of children at check-out</p>').css('display', 'block'); 
     } 

     for(var i = min_num; i < max_num; i++) 
     { 
      options += '<option value = '+i+' >'+i+'</option>'; 

     } 
     options += '</select>&nbsp;'; 

     for(var i = 0; i<=children_num; i++) 
     { 
      $('select[name="gdlr-children-number[]"]').bind('change', function(){display;}); 

      document.getElementById("children-number").innerHTML = options.repeat(children_num); 

     } 
    } 

所以基本上我对孩子下拉一个“变” listener - 将执行displayChildren函数。 displayChildren函数会根据在“子女”下拉列表中选择的子女数量来追加选择选项。这是网页

对于预订页面，进行检查，看看有多少孩子选择有载，这是用来执行displayChildren功能即

$(document).ready(function(){ 
    var children_num = $('select[name="gdlr-children-number[]"] 
    option:selected').text(); 

    displayChildren(children_num); 
}); 

要追加的年龄在主页上选择的儿童，以反映此预订单上，我曾经想过在会话中存储的年龄选择为：

$('#children-number').on('change', '.children-num', function(e){ 
    var child_num = e.target.value; 
    sessionStorage.setItem("random", child_num); 
}); 

我把这个功能就绪功能外，然后准备函数内部，检索存储的项目;

$(document).ready(function(){ 
    var children_num = $('select[name="gdlr-children-number[]"] option:selected').text(); 

    displayChildren(children_num); 

    child_num = sessionStorage.getItem("random"); 
    $('.children-num').val(child_num); 
}); 

这显然会返回一个值，所以我甚至试图捕捉选定的年龄和他们推到一个数组设置会话时在sessionStorage.getItem遍历不过，我仍然得到最后的选择的值年龄项目。

我试过尽可能详细，以使我的问题可以理解。由于

• 编辑

基于@ xcy7e评论，我会缩短的问题：

我对到预订填补职位数据的主页的预订单页。预订表单有一个儿童下拉菜单（包含值0-17），当选择该选项时，将根据所选儿童的数量附加额外的下拉菜单。附加的下拉列表将记录孩子的年龄。

我面临的问题是：在将下拉列表附加到表单并选中之后，我努力捕获该数据并将其传递到预订页面（按照我的第二个屏幕截图）。确切的问题是，在我选择了年龄后，为最后一个下拉列表选择的值（例如选择2个孩子，另外2个下拉菜单将被添加到他们的年龄被捕获。如果我选​​择2和3这些后，我提交表格，我会得到两个下拉列表的值设置为3）是所有年龄段的设置。我已经列出了上面的代码。希望这可以清除我的问题

Answer 1

您需要比较每个选择值以检索最高值。

var maxSelectedAge; 
$('select[name="gdlr-children-number[]"] option:selected').each(function(k,v) { 
    if(maxSelectedAge < parseInt($(v).val()) { 
     maxSelectedAge = $(v).val(); 
    } 
}); 

你的方法 - 建立一个数组并将其存储在会话中 - 将始终让你获得数组的最后一项。您可以预先订购，但只保存您真正需要的值（参见上面的示例）