我想用JavaScript或jQuery的

Question

選擇課程來改變內容

<select> 
    <option value="b.a">B.A</option> 
    <option value="b.com">B.Com</option> 
    <option value="b.b.a">B.B.A</option> 
</select> 

選擇學期

<option value="1">1st</option> 
<option value="2">2nd</option> 
<option value="3">3rd</option> 

現在我想的是，當我選擇第一個療程即b.a。那就不要。的學期只有一個在「Select Semester」列表中顯示，而對於b.com而言，這些shud是2和forr b.b.a這些shud是3，一旦選擇的課程頁面自動刷新和學期暑假的數量改變適應選擇的主題，關於這個我怎麼能用js或jquery或ajax來完成這個，請通過提供一些例子或教程來幫助我。

Answer 1

實施例使用jQuery和AJAX

HTML

<select id="selPrimary"> 
    <option value="b.a">B.A</option> 
    <option value="b.com">B.Com</option> 
    <option value="b.b.a">B.B.A</option> 
</select> 
<select id="selSecondary"></select> 

腳本

// jQuery doc.ready function 
$(function() { // all "action" script goes in here 
    // Selects primary "select tag" by ID and assigns change event 
    $("#selPrimary").on("change", function(e) { 
     // Empty the options that might exist 
     // (from last choice in primary) and prep 
     // secondary for new options 
     $("#selSecondary").empty(); 
     // .post is jQuery short hand for .ajax(..."type=post" 
     $.post("someFolder/someController.php", // this first param tells location of your php backend controller 
      function(data) { // this is the function that acts if the post is "successful" 
       $("#selSecondary").html(data); // fills secondary select tag with our new options 
      }, 
      "json"); // this last param tells how to return the data 
    }); 
}) 

控制器（在這種情況下，PHP）

$retValue = ""; 
//Get Post Variables. 
if (isset($_POST['selPrimary'])){ 
    $value = $_POST['selPrimary']; 
    switch($value) { 
     case "b.a": 
      $retValue = '<option value='1'>1st</option><option value='2'>2nd</option<option value='3'>3rd</option>'; 
      break; 
     case "whatev": 
      $retValue = '<option value='1'>1st</option><option value='2'>2nd</option<option value='3'>3rd</option>'; 
      break; 
    } 
} 

echo json_encode($retValue); 

Answer 2

你可以試試這個...

<script> 
function changeSem(sub) 
{ 
if(sub == 'b.a') 
{ 
    document.getElementById('sem').innerHTML = "<select id='semnum'> 
<option value='1'>1st</option> 
</select>"; 
} 
if(sub == 'b.com') 
{ 
    document.getElementById('sem').innerHTML = "<select id='semnum'> 
<option value='1'>1st</option> 
<option value='2'>2nd</option> 
</select>"; 
} 
if(sub == 'b.b.a') 
{ 
    document.getElementById('sem').innerHTML = "<select id='semnum'> 
<option value='1'>1st</option> 
<option value='2'>2nd</option> 
<option value='3'>3rd</option> 
</select>"; 
} 
} 
</script> 
Select Course 
<select id="sub" onchange="changeSem(this.value);"> 
<option value="b.a">B.A</option> 
<option value="b.com">B.Com</option> 
<option value="b.b.a">B.B.A</option> 
</select> 
Select Semester 
<div id="sem"></div> 

希望它能幫助！