下拉选项根据最大数量和其他下拉选项进行更改
[英]Dropdown option changes based on max number and other dropdown selection
问题描述
I have a page with 2 dropdown boxes. 
我有一个带有2个下拉框的页面。 One is used for picking a number of adults, the other is for the number of children. 一个用于接送一些成人，另一个用于接送一些孩子。
The total combined max of the selection can not be higher than 10. So if for example pick 4 in adults the number of options in the children dropdown will be 0 to 6. If I pick 9 in adults the options in the children dropdown will only be 0 and 1. THe total combined selection can never get above 10. 选择项的总和最大值不能超过10。因此，例如，如果在成年人中选择4，则儿童下拉菜单中的选项数将为0到6。如果我在成年人中选择9，则儿童下拉菜单中的选项将仅为0和1。总的组合选择永远不会超过10。
I am fairly new to JS/jQuery. 我对JS / jQuery相当陌生。 Can anyone give me tips or point me in the right direction? 谁能给我提示或指出正确的方向？
/Michael /迈克尔
2 个解决方案
解决方案1
0 已采纳 2015-03-26 11:53:56
You can do something like this: 您可以执行以下操作：
$(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>
解决方案2
0 2015-03-26 12:28:04
Save the code below in HTML and run in browser. 将以下代码保存为HTML并在浏览器中运行。 This will work as you expected. 这将按预期工作。
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.