Javascript 如何基于计数将显示块设置为对象

我有一张机票预订表，上面记录了儿童旅客的数量

有3个

select

来定义每次旅行的年龄，但我为它们设置了

display:none

我写了下面的代码，但我不知道如何根据每次我为每次旅行添加一个数字来显示每个

select

例如，当用户添加1次旅行时，我想显示第一次

select

。2显示第二个

选择

我想根据classname
travel
的值的增减来显示每个
选择

我该怎么做

以下是我的片段：


$（函数（）{
$（“.button click a”）。在（“click”，function（）上{
var按钮=$（此按钮）；
var oldVal=parseInt（button.closest（“ul”）.prev（）.val（））；
var newVal=（button.text（）=“+”）？oldVal+1:（oldVal>0）？oldVal-1:0；
var总_值=”；
按钮。最近的（“ul”）.prev（）.val（newVal）；
$（“.travel”）。每个（函数（）{
var cat=$（this.prev（'span'）.text（）；
总值+=cat+”：“+$（this.val（）+”，“；
});
total_value=total_value.substring（0，total_value.length-2）；
$（“.main”）.val（总价值）；
})
})
.childs{display:none；}

统计所有1名旅客


儿童




孩子1
1.
2.
孩子2
1.
2.
以下是许多可能的方法之一。基本上你想要的是：

创建一个泛型函数，当子项数量增加时，该函数可以为子项下拉列表生成必要的标记。让我们称之为
createChildDropdown（i）


此函数将接收一个索引（新的子计数），以便我们可以生成具有唯一ID的唯一字段

创建一个通用函数，该函数可以在子项数量减少时删除生成的子项下拉列表。让我们称之为
destroyChildDropdown（$el，i）


此函数将再次接收索引（新的子项计数），以便删除正确的子项下拉列表
它还接收jQuery选择器，以便知道从哪个元素删除子下拉列表

现在我们已经有了逻辑，我们可以简单地检查
newVal
与
oldVal
的对比，以了解子项的数量是否增加，并调用正确的函数。假设我们创建一个名为
的新元素来保存所有下拉列表，我们可以这样做：

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

if（oldValnewVal）{
destroyChildDropdown（$（'.childDropdowns'），newVal）；
}


$（函数（）{
//函数创建子下拉列表
var createChildDropdown=函数（i）{
//以以下格式创建div：
// 
//儿童（数字）
//    
// 
变量$childDropdown=$（''{
“类”：“childs”
});
$childDropdown.append（$（''）{
'for'：'childDropdown-'+i
}).text（“子项”+i））；
$childDropdown.append（$（''）{
'id'：'childDropdown-'+i
}));
//定义为每个子级提供的选项
var选项=['a'，'b'，'c']；
options.forEach（函数（选项）{
//创建新的选项元素并附加到
$childDropdown.find（'select'）.append（$（''）.text（option）.attr（'value'，option））；
});
//返回documentFragment以便我们可以附加它
返回$childdown；
};
//用于销毁子下拉列表的函数
var DROPDOWN=函数（$el，i）{
$el.find（'div.childs'）.get（i.remove（）；
};
$（“.button click a”）。在（“click”，function（）上{
var按钮=$（此按钮）；
var oldVal=parseInt（button.closest（“ul”）.prev（）.val（））；
var newVal=（button.text（）=“+”）？oldVal+1:（oldVal>0）？oldVal-1:0；
var总_值=”；
按钮。最近的（“ul”）.prev（）.val（newVal）；
$（“.travel”）。每个（函数（）{
var cat=$（this.prev（'span'）.text（）；
总值+=cat+”：“+$（this.val（）+”，“；
});
if（oldValnewVal）{
destroyChildDropdown（$（'.childDropdowns'），newVal）；
}
total_value=total_value.substring（0，total_value.length-2）；
$（“.main”）.val（总价值）；
})
})

统计所有1名旅客


儿童




感谢您的及时回复。我的问题是：如何为每个selectbox设置名称？另一个问题是，我可以用表单发送此selectbox值吗？@inaz如果要设置
name
属性，请查看
createChildDropdown（）
函数以及创建和附加
元素的部分，您可以添加
'name'：'childDropdown-'+i
，或任何您喜欢的内容。请记住，名称必须是唯一的，这样每个子级都将存储其select值。只要这些元素作为
元素的子元素被注入，它们就会与表单一起发送。我面临一个问题。我需要发送不同的值。但是在这个函数中，我们没有任何东西可以给每个选项赋值。在每个选择框中，我想从0到12开始每个选项的值。我该怎么做？@inaz你看过代码中的注释了吗？只需在
var option=[…]中修改数组
我想更改每个选项的值。在这种情况下，文本和值是相同的，例如：a我需要更改0