1

コースを選択

<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。いいえ。学期の数は、「学期の選択」リストに表示されるのは 1 つのみであり、b.com の場合は 2、bba の場合は 3 です。つまり、コースが選択されると、ページが自動的に更新され、学期の数が変更されます。選択された主題について、これに関して、js、jquery、またはajaxを使用してこれを達成するにはどうすればよいですか、いくつかの例またはチュートリアルを提供して親切に助けてください。

4

2 に答える 2

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);
于 2012-11-04T20:59:20.997 に答える
0

あなたはこれを試すことができます...

<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>

それが役に立てば幸い！

于 2012-11-04T18:29:35.187 に答える