在html中使用jquery显示多个选择值
在html中使用jquery显示多个选择值
提问于 2019-03-20 20:57:09
我希望通过第一次选择显示在中选择的值，如果用户在第二次选择中选择了一个值，它将位于第一个值之后。
我有多个选择值，我将用select的值替换类".search_person“中的文本。
所以如果你在第一个选择选项2中选择，我想用jquery显示2个成年人，如果你在第二个选项中也选择3，我想显示2个成年人，3个孩子。
但是如果我改变了select的值，我想删除旧值并显示新的值。
例:2个成人，1个冷水或1个成人，2个孩子
THis是我的js，但这不起作用...你能帮帮我吗？
jQuery(document).ready(function($) {
$('body').bind('beforeunload', function() {
$('select[name^="pax_1"]').val(0);
$('select[name^="pax_2"]').val(0);
});
$(".show").hide();
$(".input-search").click(function() {
$(".show").toggle('fast', function() {
if ($('.show').is(':visible')) {
$("#icons").addClass("icon-chevron-up");
$("#icons").removeClass("icon-chevron-down");
} else {
$("#icons").addClass("icon-chevron-down");
$("#icons").removeClass("icon-chevron-up");
}
});
});
var array = [];
$(document).on('change', 'select[name^="pax_1"]', function() {
var optionSelected = $(this).find("option:selected");
var valueSelected = optionSelected.val() + ' adults';
array.splice($(this).parent().index(), 1);
array.push(valueSelected);
});
$(document).on('change', 'select[name^="pax_2"]', function() {
var optionSelected = $(this).find("option:selected");
var valueSelected = optionSelected.val() + ' childrens';
array.splice($(this).parent().index(), 1);
array.push(valueSelected);
});
$(document).on('change', 'select', function() {
var result = array.join(", ");
$('.search_person').html(array);
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-search">
<span class="search_person" title="please select">select number o</span>
<span id="icons" class="icon-chevron-down"></span>
<div id="occupants" class="occupants sqs">
<div class="ast-form-group">
<label class="ast-form-label multi-pax-label">adult</label>
<select class="ast-form-control pax-combo" name="pax_1">
<option value="0" selected="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="ast-form-group">
<label class="ast-form-label multi-pax-label">child</label>
<select class="ast-form-control pax-combo" name="pax_2">
<option value="0" selected="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-20 21:17:53
你的函数太多了：
$(function() {
$(document).on('change', '.pax-combo', function() {
var adults = +$('[name="pax_1"]').val(); // convert to number
var children = +$('[name="pax_2"]').val();
var text = [];
if (adults) text.push(adults +" adult"+(adults ==1?"":"s" )); // test > 0 and == 1
if (children) text.push(children+" child"+(children==1?"":"ren"));
$('.search_person').html(text.join(", "));
})
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-search">
<span class="search_person" title="please select">select number o</span>
<span id="icons" class="icon-chevron-down"></span>
<div id="occupants" class="occupants sqs">
<div class="ast-form-group">
<label class="ast-form-label multi-pax-label">adult</label>
<select class="ast-form-control pax-combo" name="pax_1">
<option value="0" selected="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
<div class="ast-form-group">
<label class="ast-form-label multi-pax-label">child</label>
<select class="ast-form-control pax-combo" name="pax_2">
<option value="0" selected="">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55261299
复制相关文章
相似问题
腾讯云开发者
