HTML 选择类型答案

【问题标题】：HTML selection typeHTML 选择类型
【发布时间】：2023-04-01 15:40:01
【问题描述】：

我的选择类型有问题.. 如果选择 WAPC，则 yeargrad 选择类型应包含 2011-2015 年，ASU 的 yeargrad 应为 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>

【问题讨论】：

['school'] $_GET，$_POST）?> ?> doulbe 结束标签?删除一个
这更像是等待工作的伪代码，（没有表单标签，没有指示是 POST 还是 GET 等）
我觉得这里最好用js
学校是包含'WAPC'、'INAIS'、'ASU'的选择类型..
如果我选择 WAPC.. 在毕业年份下，这是一个选择框应该包含 2011-2015 之间的范围，ASU 介于 1990-2014 之间

标签： php html css

【解决方案1】：

我希望这会有所帮助。

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

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

【讨论】：

【解决方案2】：

你应该在 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(...){
       ...
   }
}

【讨论】：

【解决方案3】：

我认为你应该使用 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);

【讨论】：