フォーム提出後の余分な文字

Question

このコードはselectboxを作成し、各オプション値にインデックスを付ける私の関数の一部です。最初のテキストボックスは、プラス値とマイナス値に基づいて子のカウントを取得します。後に子供がいる場合、私は各子供の年齢を取得します。私の問題はフォームを提出した後に発生します。子供の各年齢の価値が得られます。各値の間に2つのコンマが表示されます。例えば ：最初

5、5、8

は、第三の年齢のための第二の子供の年齢及び第である、第一childerenの年齢です。 この問題はアクションページで発生します。 正しいサンプルは次のようにする必要があります：

5,5,8

注：私はちょうど私がこれを解決するために何をすべき

それらの間の余分なカンマを削除カンマを維持する必要があります余分なカンマの問題？ここ は私の抜粋です：

$(function() { 
 

 
    var createChildDropdown = function(i) { 
 
    var $childDropdown = $('<div />', { 
 
     'class': 'childs' 
 
    }); 
 
    $childDropdown.append($('<label />', { 
 
     'for': 'childDropdown-' + i 
 
    }).text('Child age ' + i)); 
 
    $childDropdown.append($('<select />', { 
 
     'name': 'childDropdown' 
 
    })); 
 
     var options = [' 1 years old', '2 years old', '3 years old']; 
 
    options.forEach(function(option, index) { 
 
\t $childDropdown.find('select').append($('<option />').text(option).attr('value', `,${index}`)); 
 

 

 
    }); 
 
     return $childDropdown; 
 
    }; 
 
    var destroyChildDropdown = function($el, i) { 
 
    $el.find('div.childs').get(i).remove(); 
 
    }; 
 

 
    $(".button-click-child a").on("click", function() { 
 
    var button = $(this); 
 
    var oldVal = parseInt(button.closest("ul").prev().val()); 
 
    var newVal = (button.text() == "+") ? oldVal + 1 : (oldVal > 0) ? oldVal - 1 : 0; 
 
    var total_value = ""; 
 
\t if(newVal >= 5) return; 
 
    button.closest("ul").prev().val(newVal); 
 

 
    $(".cat_textbox").each(function() { 
 
     var cat = $(this).prev('span').text(); 
 
    }); 
 

 
    if (oldVal < newVal) { 
 
     $('.childDropdowns').append(createChildDropdown(newVal)); 
 
    } else if (oldVal > newVal) { 
 
     destroyChildDropdown($('.childDropdowns'), newVal); 
 
    } 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<form method="post" action="http://www.fardadtour.com/roundtrip_search.bc"> 
 
<input type="text" class="cat_textbox" name="child" value="0" /> 
 

 
<ul class="button-group button-click-child"> 
 
    <li><a href="javascript:void(0)"><span class="hide">+</span></a></li> 
 
    <li><a href="javascript:void(0)" ><span class="hide">-</span></a></li> 
 
    </ul> 
 
     <div class="childDropdowns"></div> 
 
    <button type="submit">SEND</button> 
 
    </form>

Answer 1

問題はここにある：

$childDropdown.find('select').append($('<option />').text(option).attr('value', `,${index}`)); 

あなたはカンマでindex値を追加しています。これを修正する：

$childDropdown.find('select').append($('<option />').text(option).attr('value', index));