如何根据另一选项选项限制<select>中的选项

Question

我试图根据另一选择限制选项的数量。例如在这个例子中“你跳过的班级有多少学分？”应该限制​​为等于或小于前面的问题“你在这个学期学习了多少总学分？”。所以如果我在学期只取得9个学分，那么我跳过的学分数量应该等于或少于整个学期的9个学分。

任何帮助将不胜感激。

这里是的jsfiddle：http://jsfiddle.net/k7tDP/1/

这里是JS：

function calculateCost() { 
    'use strict'; 
    // enter annual tuition 
    var $annualTuition = parseInt($('#annual_tuition').val()); 
    // tuition per semester 
    var semesterTuition = Math.round($annualTuition/3); 
    // total number of credits for semester 
    var $semesterCredits = parseInt($('#semester_credits').val()); 
    // cost of a single credit 
    var singleCreditCost = semesterTuition/$semesterCredits; 
    // total credits for class being skipped 
    var $skippedTotalCredits = parseInt($('#skipped_total_credits').val()); 
    // total cost for class being skipped 
    var skippedTotalCreditsCost = $skippedTotalCredits * singleCreditCost; 
    // number of times skipped class meets per week 
    var $skippedWeekDays = parseInt($('#skipping_class_meet').val()); 
    // from date 
    var fromDate = $('#from').datepicker('getDate'); 
    // to date 
    var toDate = $('#to').datepicker('getDate'); 
    // calculate number of weeks in date range (semester) using 'from/to' dates 
    var skippedWeeks = Math.ceil((toDate - fromDate)/(1000 * 7 * 60 * 60 * 24)); 
    console.log(skippedWeeks); 
    // total number of days in semester for class being skipped 
    //var $skippedTotalDays = parseInt($('#skipped_total_days').val()); 
    var skippedTotalDays = $skippedWeekDays * skippedWeeks; 
    // (total cost of class)/(total number of class days in semester) = cost of class 
    var skippedSingleClassCost = skippedTotalCreditsCost/skippedTotalDays; 
    return skippedSingleClassCost.toFixed(2); 

} 

$(function() { 
    'use strict'; 

    $('#from').datepicker({ 
     defaultDate: '+1w', 
     changeMonth: true, 
     numberOfMonths: 1, 
     onSelect: function() { 
      //toDate = $(this).datepicker('getDate'); 
     } 
    }); 

    $('#to').datepicker({ 
     defaultDate: '+1w', 
     changeMonth: true, 
     numberOfMonths: 1, 
     onSelect: function() { 
      //fromDate = $(this).datepicker('getDate'); 
     } 
    }); 

    $('#cost').on('click', function() { 
     $('.costFigure').fadeIn('fast'); 
     $('#costTotal').html(calculateCost()); 

    }); 

}); 

下面是HTML：

<form id="costForm" action="#" onsubmit="#"> 

       <div> 
        <label for="annual_tuition">What is your annual tuition (estimated)?</label> 
        <div class="styled_select"> 
         <select name="annual_tuition" id="annual_tuition" value="tuition amount" autofocus> 
          <option value="0">&nbsp;</option> 
          <option value="5000">$5,000</option> 
          <option value="10000">$10,000</option> 
          <option value="15000">$15,000</option> 
          <option value="20000">$20,000</option> 
          <option value="25000">$25,000</option> 
          <option value="30000">$30,000</option> 
          <option value="35000">$35,000</option> 
          <option value="40000">$40,000</option> 
          <option value="45000">$45,000</option> 
          <option value="50000">$50,000</option> 
         </select> 
        </div> 
       </div> 

       <div> 
        <label for="semester_credits">How many total credits are you taking this semester?</label> 
        <div class="styled_select"> 
         <select name="semester_credits" id="semester_credits" value="" tabindex="2"> 
          <option value="0">&nbsp;</option> 
          <option value="3">3 credits</option> 
          <option value="6">6 credits</option> 
          <option value="9">9 credits</option> 
          <option value="12">12 credits</option> 
          <option value="13">13 credits</option> 
          <option value="14">14 credits</option> 
          <option value="15">15 credits</option> 
          <option value="16">16 credits</option> 
          <option value="17">17 credits</option> 
          <option value="18">18 credits</option> 
         </select> 
        </div> 
       </div> 

       <div> 
        <label for="skipped_total_credits">How many credits is the class you skipped?</label> 
        <div class="styled_select"> 
         <select name="skipped_total_credits" id="skipped_total_credits" value="" tabindex="2"> 
          <option value="0">&nbsp;</option> 
          <option value="3">3 credits</option> 
          <option value="6">6 credits</option> 
          <option value="9">9 credits</option> 
          <option value="12">12 credits</option> 
          <option value="13">13 credits</option> 
          <option value="14">14 credits</option> 
          <option value="15">15 credits</option> 
          <option value="16">16 credits</option> 
          <option value="17">17 credits</option> 
          <option value="18" disabled>18 credits</option> 
         </select> 
        </div> 
       </div> 

       <div> 
        <label for="skipping_class_meet">How many times a week does the class you skipped meet?</label> 
        <div class="styled_select"> 
         <select name="skipping_class_meet" id="skipping_class_meet" value="" tabindex="2"> 
          <option value="0">&nbsp;</option> 
          <option value="1">1 time a week</option> 
          <option value="2">2 times a week</option> 
          <option value="3">3 times a week</option> 
          <option value="4">4 times a week</option> 
          <option value="5">5 times a week</option> 
         </select> 
        </div> 
       </div> 



       <div class="dateRange clearfix"> 
        <label>Between what months are you enrolled in this class?</label> 
        <div style="width: 48%; float: left;"> 
         <label for="from">From:</label> 
         <input type="text" id="from" name="from"> 
        </div> 

        <div style="width: 48%; float: right;"> 
         <label for="to">To:</label> 
         <input type="text" id="to" name="to"> 
        </div> 
       </div> 

       <div> 
        <button id="cost" type="button">Calculate</button> 
       </div> 

       <div class="costFigure"> 
        <h1>your missed class cost you $<span id="costTotal"></span></h1> 
       </div> 

      </form> 

Answer 1

我创建了一个快速功能来帮助你，可能有一个更好的方法来做到这一点，但它的工作相当好！

元素的变换#semester_credits我获取值（学期数量，然后遍历下一个选择框并删除那些具有更高值的选择框，我使用全局var来缓存删除的选项如果用户改变他们的想法，我们需要将它们添加回去。

$(function() { 

var savedOpts = ""; 
$('#semester_credits').change(function() { 
    //Add all options back in; 
    if(savedOpts) { 
     $('#skipped_total_credits').append(savedOpts); 
     savedOpts = ""; 
    } 

    //Return false if blank option chosen; 
    if($(this).val() === "0") 
     return false; 

    var chosenCreds = parseInt($(this).val()); 
    $('#skipped_total_credits option').each(function() { 
     var thisCred = parseInt($(this).val()); 
     if(thisCred > chosenCreds) { 
      //Remove 
      savedOpts += $(this)[0].outerHTML; 
      $(this).remove(); 
     } 
    }); 
}); 

这里更新fiddle

PS的例子凯哈特曼建议也是一个很好的方式来实现这一目标。

Answer 2

如果你想为一个问题的下拉列表根据以前的答案更改，您需要为每个select元素添加一个onchange事件，该元素将更新另一个下拉列表。这应该调用一个函数来删除或添加表单中的元素。

否则，您可以为您的Calculate按钮添加验证功能。

Answer 3

在您的dropdown的change触发一个onchange触发器并根据值创建第二个dropdownenable或disabled。

$("#semester_credits").change(function() { 
     var $this=this; 
     $("#skipped_total_credits").children().each(function(){ 
      $(this).attr("disabled",parseInt($this.value) < parseInt(this.value)); 
     }); 
    }); 

检查小提琴here

编辑

$ THIS.VALUE包含"semester_credits"下拉列表中，选择现在对于"skipped_total_credits"每个孩子的价值，我检查如果该值小于孩子的价值，然后使其禁用，即attr("disabled", true)否则使该儿童启用。