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

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>

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

Dropdown option changes based on max number and other dropdown selection

javascript

math

jquery

dropdownbox