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(); 
    } 
}); 

你的方法 - 建立一個數組並將其存儲在會話中 - 將始終讓你獲得數組的最後一項。您可以預先訂購，但只保存您真正需要的值（參見上面的示例）