Question

我有一个包含2个下拉框的页面。一个是用于挑选一些成年人，另一个是用于儿童的数量。

选择的总组合最大值不能高于10.因此，如果例如在成人中选择4，则子项下拉选项的数量将为0到6.如果我在成人中选择9，则选择儿童选项下拉列表只有0和1.总组合选择永远不会超过10。

我是JS / jQuery的新手。任何人都可以给我提示或指出我正确的方向吗？

/迈克尔

Answer 1

您可以这样做：

    $(document).ready(function () {
          $("#ddlAdult").change(function(){
              console.log("In");
              var value = parseInt($(this).val());
              var optionsToBeCreated = 10 - value;
              var count =0;
              $("#ddlChildren").empty(); 
              console.log(optionsToBeCreated);
              while(count <= optionsToBeCreated)
              {
                  console.log("In");
                  $("#ddlChildren").append("<option value="+count+">"+count+"</option");
                  count = count + 1;
              }
          });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="ddlAdult">
        <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>
    </select>
    <select id="ddlChildren">
    </select>

Answer 2

将下面的代码保存在HTML中并在浏览器中运行。这将按预期工作。

 


    <html>
    <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script language="javascript">
    var adultValue=0;
    var childValue=0;
    var valueChk=0;
    $( document ).ready(function() {
        for(i=0;i<=10;i++)
            $(".adult").append('<option value='+i+'>'+i+'</option>');
            $( ".adult" ).change(function() {
              adultValue=$( ".adult" ).val();
             // alert(adultValue);
              valueChk=10-adultValue;
              $('.child')
                                                .find('option')
                                                .remove()
                                                .end();
               for(j=0;j<=valueChk;j++)
               {
                        $(".child").append('<option value='+j+'>'+j+'</option>');
               }        
              
            });        
            
            $( ".child" ).change(function() {
             
              valueChk=parseInt($( ".adult" ).val())+parseInt($( ".child" ).val());
              alert(valueChk);
            });        
            
    });


    </script>
    </head>
    <body>
    <select class="adult">

    </select>
    <select class="child">
    </select>
    </body>
    </html>

下拉选项根据最大数量和其他下拉选择进行更改

2 个答案: