Question

我正在尝试自动填充网页上的2个选择框。

当用户选择一个班级时，选择框2 auto会有人播放的主要规格选项。当用户选择Tank（例如）时，选择box 3 auto可以选择Race

我已经管理了第二次从第一次填充，但它有第三个选项

http://daemonknight.atspace.co.uk/apply.php - 查看相关页面

<?php include("includes/classcheck.php"); ?>
<?php include("includes/racecheck.php"); ?>

<tr>
    <td>Class</td>
    <td><select id="class" name="class" onchange="populate('class','mainspec')")>
        <option value="">Select</option>
        <option value="Death Knight">Death Knight</option>
        <option value="Druid">Druid</option>
        <option value="Hunter"> Hunter </option>
        <option value="Mage"> Mage </option>
        <option value="Paladin">Paladin</option>
        <option value="Priest"> Priest </option>
        <option value="Rogue"> Rogue </option>
        <option value="Shaman"> Shaman </option>
        <option value="Warlock"> Warlock </option>
        <option value="Warrior"> Warrior </option>
        <option value="Monk"> Monk </option>
        </select>
    </td>
</tr>
<tr>
    <td>Main Spec</td>
    <td><select id="mainspec" name="mainspec" onchange="populate('mainspec','race')")></select></td>
</tr>
<tr>
    <td>Race</td>
    <td><select id="race" name="race"></select></td>
</tr>

----------------- classcheck.php ------------------

<script type="text/javascript">
function populate(s1,s2){
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);

    s2.innerHTML ="";
    if (s1.value=="Paladin"){
        var optionArray=["|","Healer|Healer","Tank|Tank","DPS|DPS"];
    } else if (s1.value=="Death Knight"){
        var optionArray=["|","Tank|Tank","DPS|DPS"];
    } else if (s1.value=="Druid"){
        var optionArray=["|","Healer|Healer","Tank|Tank","MDPS|MDPS","RDPS|RDPS"];
    } else if (s1.value=="Hunter"){
        var optionArray=["|","DPS|DPS"];
    }else if (s1.value=="Mage"){
        var optionArray=["|","DPS|DPS"];
    }else if (s1.value=="Priest"){
        var optionArray=["|","Healer|Healer","DPS|DPS"];
    }else if (s1.value=="Rogue"){
        var optionArray=["|","DPS|DPS"];
    }else if (s1.value=="Shaman"){
        var optionArray=["|","Healer|Healer","DPS|DPS"];
    }else if (s1.value=="Warlock"){
        var optionArray=["|","DPS|DPS"];
    }else if (s1.value=="Warrior"){
        var optionArray=["|","Tank|Tank","DPS|DPS"];
    }else if (s1.value=="Monk"){
        var optionArray=["|","Tank|Tank","Healer|Healer","DPS|"];
    }

    for(var option in optionArray){
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);      
    }
}
</script>

---------------------- racecheck.php --------------

<script type="text/javascript">
function populate(s1,s2){
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);

    s2.innerHTML ="";
    if (s1.value=="Paladin"){
        var optionArray=["|","Human|Human","Dwarf|Dwarf","Draenei|Draenei"];
    } else if (s1.value=="Death Knight"){
        var optionArray=["|","Human|Human","Dwarf|Dwarf","Night Elf|Night Elf","Gnome|Gnome","Draenei|Draenei","Worgen|Worgen"];
    } else if (s1.value=="Druid"){
        var optionArray=["|","Night Elf|Night Elf","Worgen|Worgen"];
    } else if (s1.value=="Hunter"){
        var optionArray=["|","Human|Human","Dwarf|Dwarf","Night Elf|Night Elf","Draenei|Draenei","Worgen|Worgen","Pandaren|Pandaren"];
    }else if (s1.value=="Mage"){
        var optionArray=["|","Human|Human","Dwarf|Dwarf","Night Elf|Night Elf","Gnome|Gnome","Draenei|Draenei","Worgen|Worgen","Pandaren|Pandaren"];
    }else if (s1.value=="Priest"){
        var optionArray=["|","Human|Human","Dwarf|Dwarf","Night Elf|Night Elf","Gnome|Gnome","Draenei|Draenei","Worgen|Worgen","Pandaren|Pandaren"];
    }else if (s1.value=="Rogue"){
        var optionArray=["|","Human|Human","Dwarf|Dwarf","Night Elf|Night Elf","Gnome|Gnome","Worgen|Worgen","Pandaren|Pandaren"];
    }else if (s1.value=="Shaman"){
        var optionArray=["|","Dwarf|Dwarf","Draenei|Draenei","Pandaren|Pandaren"];
    }else if (s1.value=="Warlock"){
        var optionArray=["|","Human|Human","Dwarf|Dwarf","Gnome|Gnome","Worgen|Worgen"];
    }else if (s1.value=="Warrior"){
        var optionArray=["|","Human|Human","Dwarf|Dwarf","Night Elf|Night Elf","Gnome|Gnome","Draenei|Draenei","Worgen|Worgen","Pandaren|Pandaren"];
    }else if (s1.value=="Monk"){
        var optionArray=["|","Human|Human","Dwarf|Dwarf","Night Elf|Night Elf","Gnome|Gnome","Draenei|Draenei","Pandaren|Pandaren"];
    }

    for(var option in optionArray){
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);      
    }
}
</script>

Answer 1

使用JQuery / Javascript，就像在示例

中一样

http://jsfiddle.net/4po4wt0x/

<select id='countries'>
<option></option>
<option value='scotland'> Scotland </option>
<option value='england'>England </option>

$("#countries").change( function() { 
if ($("#countries").val()=='scotland') {
        $("#cities").append("<option>Glasgow</option>");
        $("#cities").append("<option>Edinburgh</option>")
    }

});

php选择从另一个自动填充的框

1 个答案: