使用jQuery对多个html选择的值进行排序和获取

时间:2017-06-22 11:00:21

标签: jquery html

我以编程方式生成带有整数选项的select(从0到18) 我的目标是将结果过滤成不同的年龄类别,如: 婴儿少于2岁 2岁以下儿童不超过18岁 成人大于或等于18

    $('.passengerAge').filter(function (req1) {

    var valbebe = parseInt($(this).val(), 10) <= 2;
         
    return valbebe;
          
    });
    $('.passengerAge').filter(function (req2) {
    var valadulte = parseInt($(this).val(), 10) >= 18;
         
    return valadulte;
          
    });

    $('.passengerAge').filter(function (req3) {

    var valenfant = parseInt($(this).val(), 10) < 18 && parseInt($(this).val(), 10) > 2 ;
         
    return valenfant;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <select class="passengerAge" id="select_1" name="select_1">
    <option value="0">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>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    </select>

代码正在运行,但只显示最后返回的值。 第二,我需要在隐藏和分隔的文本输入中显示每个返回的值,因此我首先获取值,然后将它们推送到输入中。

任何提示?

1 个答案:

答案 0 :(得分:2)

你调用.filter()函数的方式不起作用,因为它在文档就绪时执行 - 即使你的计数是正确的,它总会返回5个婴儿(因为默认值似乎是0)

我不明白的方式,你分配年龄组变量,如valadulte。或者我不知道比较/分配语句的这种捷径,或者它刚刚被打破。所以我做了很长的路,使用if语句......

首先您必须将事件触发器绑定到您的计数功能,以便在您希望对它们进行计数时对这些值进行计数。

$('.passengerAge').on("change", function(){
  //put age-group counting code here
});

这可以简单地改变任何选择字段,如上面或

$('.btnConfirm').on("click", function(){
  //put age-group counting code here
});

单击确认按钮

时触发

第二部分是代码,用于统计您的年龄段。 在操作开始时,我们重置值,以保证安全

$("input[name='numAdults']").val("0");
$("input[name='numInfants']").val("0");
$("input[name='numChildren']").val("0");

然后我们循环遍历每个选择框并使用if语句来比较所选值。在if块中,你增加适当的值......

 $('.passengerAge').each(function(){ 

 if($("option:selected", this).attr("value") < 2)
 {
     $("input[name='numInfants']").val( function(i, oldval) {
    return ++oldval;
    });
 }

  if($("option:selected", this).attr("value") > 2 && $("option:selected", this).attr("value") < 18)
 {
  $("input[name='numChildren']").val( function(i, oldval) {
    return ++oldval;
    });
 }

if($("option:selected", this).attr("value") == 18)
 {
  $("input[name='numAdults']").val( function(i, oldval) {
    return ++oldval;
    });
 }
});

使用浏览器检查器检查隐藏的字段,并使用更新的小提示符https://jsfiddle.net/d62r26hp/1/