Question

我的选择类型有问题.. 如果选择 WAPC ， yeargrad 选择类型应包含2011-2015年，ASU年份应为2000-2010，INAIS 1900-1999 ..

<div class="field">
<label for="school">School</label>
<select name="school" id="school" >                                                                                         <option value="WAPC" selected>WAPC</option>
<option value="INAIS">INAIS</option>
<option value="ASU">ASU</option>
</select>                       
</div>  



<select name="yeargrad" id="yeargrad">
<?php           
if(['school'] == 'WAPC'){                               
for ($i=2011; $i<=2015; $i++)
{
echo '<option value='.$i.'>'.$i.'</option>';
} 
}

if(['school'] == 'ASU'){                                
for ($i=2000; $i<=2010; $i++)
{
echo '<option value='.$i.'>'.$i.'</option>';
} 
}

if(['school'] == 'WAPC'){                               
for ($i=1999; $i<=1990; $i++)
{
echo '<option value='.$i.'>'.$i.'</option>';
} 
}
?>
?>  
</select>

Answer 1

你应该在JS / JQUERY

中这样做

这是我的例子：https://jsfiddle.net/2hx1o4ns/8/

将onchange-Function添加到Select-Element。

<div class="field">
<label for="school">School</label>
<select name="school" id="school" onchange="change()">
    <option value="WAPC" selected>WAPC</option>
    <option value="INAIS">INAIS</option>
    <option value="ASU">ASU</option>
</select>
</div>
  <select name="yeargrad" id="yeargrad">
</select>

这在JS

中

function change(){
   var selectetOption = $('#school').find(":selected").text();

   if(selectetOption==='WAPC'){
       for (i = 2011; i <= 2015; i++) {
         $('#yeargrad').append("<option value='"+i+"'>"+i+"</option>");
       }
   }
   else if(...){
       ...
   }
}

Answer 2

我认为你应该使用jquery更容易

这是我的样本 https://jsfiddle.net/humpy6qL/15/

HTML：

<select name="select1">
  <option value=""></option>
  <option value="val1">value 1</option>
  <option value="val2">value 2</option>
  <option value="val3">value 3</option>
</select>

<select name="select2">
</select>

JQuery的

(function($){
    $(document).ready(function(){
    $('select[name="select1"]').on('change', function(){
        var sel1 = $(this);
      var sel2 = $('select[name="select2"]');
      $('option', sel2).remove();
      if(sel1.val() === 'val1'){//Checks the select value
        sel2.append(new Option("option text1", "value1"));
        sel2.append(new Option("option text2", "value2"));
      }
      else if(sel1.val() === 'val2'){
        sel2.append(new Option("option text3", "value3"));
        sel2.append(new Option("option text4", "value4"));
      }
      else if(sel1.val() === 'val3'){
        sel2.append(new Option("option text5", "value6"));
        sel2.append(new Option("option text6", "value7"));
      }
    });  
  });

})(jQuery);

Answer 3

我希望这会有所帮助。

<select name="school" id="school" onchange="showHint(this.value);">
    <option value="WAPC" selected>WAPC</option>
    <option value="INAIS">INAIS</option>
    <option value="ASU">ASU</option>
</select>

<script>
    function showHint(str) {
        if (str.length == 0) {
            console.log("Value doesn't come");
            return;
        } else {
             var sel = document.getElementById('yeargrad');
             sel.innerHTML = null;
             if(str == 'WAPC'){
                 for (var i = 2011; i < 2016; i++) {
                     var opt = document.createElement('option');
                     opt.innerHTML = i;
                     opt.value = i;
                     sel.appendChild(opt);
                 }
             }elseif(str == 'INAIS'){
                 for (var i = 1900; i < 2000; i++) {
                     var opt = document.createElement('option');
                     opt.innerHTML = i;
                     opt.value = i;
                     sel.appendChild(opt);
                 }
             }elseif(str == 'ASU'){
                 for (var i = 2000; i < 2011; i++) {
                     var opt = document.createElement('option');
                     opt.innerHTML = i;
                     opt.value = i;
                     sel.appendChild(opt);
                 }
            }
        }
    }
</script>

如果这有帮助，请告诉我。

HTML选择类型

3 个答案: