0
我有一个预订飞行形式,需要儿童旅客的数量。如何将显示块设置为基于计数的对象
有3 select
来定义每个旅行的年龄,但我设置display:none
给他们。
我写了下面的代码,但我不知道如何根据每次为每次旅行添加号码显示每个select
。
例如,当用户添加1个旅行时,我想显示第一个select
。 2显示第二个select
。
我想显示每个select
基于值的增加和减少与类名travel
。
我该怎么做?
这里是我的代码片段:
$(function() {
$(".button-click 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 = "";
button.closest("ul").prev().val(newVal);
$(".travel").each(function(){
var cat = $(this).prev('span').text();
total_value += cat + ": " + $(this).val() + ", ";
});
total_value = total_value.substring(0, total_value.length - 2);
$(".main").val(total_value);
})
})
.childs{ display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
Count all1 Traveller(s)
<input type="text" name="no_travellers" class="main" value="Adults: 1" placeholder="" />
</label>
<br/>
<label>
<span>Children</span>
<input type="text" class="travel" id="CAT_Custom_410672" name="CAT_Custom_410672" value="0" />
<ul class="button-group button-click">
<li><a href="#" class="small button secondary"><i class="fa fa-plus"><span class="hide">+</span></i></a></li>
<li><a href="#" class="small button secondary"><i class="fa fa-minus"><span class="hide">-</span></i></a></li>
</ul>
</label>
<div class="childs">
<label>Child1</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<div class="childs">
<label>Child2</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
谢谢你的提示答案。我的问题是:我如何设置名称到每个选择框?另一个问题是我可以发送这个选择框值的形式? – inaz
@inaz如果要设置'name'属性,请查看'createChildDropdown()'函数,并在创建和追加元素的部分添加'name':'childDropdown-' + i',或者任何你喜欢的东西。请记住,名称必须是唯一的,以便每个孩子都可以存储他的选择值。只要这些元素作为“
我面临一个问题。我需要发送不同的值。但是在这个函数中,我们没有任何东西可以将值放在每个选项上。在每个选择框中,我想从0到12开始每个选项的值。我该怎么做? – inaz