2014-01-21 107 views
1

我試圖根據另一選擇限制選項的數量。例如在這個例子中「你跳過的班級有多少學分?」應該限制​​爲等於或小於前面的問題「你在這個學期學習了多少總學分?」。所以如果我在學期只取得9個學分,那麼我跳過的學分數量應該等於或少於整個學期的9個學分。如何根據另一選項選項限制<select>中的選項

任何幫助將不勝感激。

這裏是的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> 
+2

這裏是一個工作解決方案:http://www.sanwebe.com/2013/05/select-box-change-dependent-options-dynamically –

+0

@KaiHartmann提出的上述答案是最好的解決方案和一個很好的解決方法,我非常贊同並建議使用相同的方式。 – BetaCoder

+0

創建17個數組似乎矯枉過正,不是嗎? –

回答

0

我創建了一個快速功能來幫助你,可能有一個更好的方法來做到這一點,但它的工作相當好!

元素的變換#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的例子凱哈特曼建議也是一個很好的方式來實現這一目標。

+0

謝謝!在凱的例子中,我將不得不創建17個幾乎相同的值數組,我認爲不會? –

+0

@LesBallard我已經稍微修改了這個函數,並更新了小提琴,這些選項並沒有像預期的那樣被追加,現在全部修復了。很高興這有助於。 –

0

如果你想爲一個問題的下拉列表根據以前的答案更改,您需要爲每個select元素添加一個onchange事件,該元素將更新另一個下拉列表。這應該調用一個函數來刪除或添加表單中的元素。

否則,您可以爲您的Calculate按鈕添加驗證功能。

1

在您的dropdownchange觸發一個onchange觸發器並根據值創建第二個dropdownenabledisabled

$("#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)否則使該兒童啓用。

+0

多數民衆贊成在偉大的!我將嘗試瞭解發生了什麼 –

+0

你能詳細介紹一下這一行發生了什麼:$(this).attr(「disabled」,parseInt($ this.value)

+0

請參閱我的編輯。 –

相關問題