如何根据文本框中的值填充下拉列表？

Question

我希望根据我在文本框字段中的值显示下拉列表选项。例如，如果文本框中的值为“J”，则下拉列表应显示“J”的值。它不是从另一个下拉列表中填充下拉列表，而是根据文本框中的值填充下拉列表。

这就是我的意思是当文本框字段中的值为 J 时，它应该显示基于 'J' 的插槽：

这是我编写的代码，但我想更改它不需要从第一个下拉列表中选择选项。

function dynamicdropdown(listindex)
    {
         switch (listindex)
         {
           case "I" :
             document.getElementById("reserveSlot").options[0]=new Option("Select Slot","");
             document.getElementById("reserveSlot").options[1]=new Option("11:20AM","11:20AM");
             break;
           case "J" :
             document.getElementById("reserveSlot").options[0]=new Option("Select Slot","");
             document.getElementById("reserveSlot").options[1]=new Option("1:00PM","1:00PM");
             break;
         }
         return true;
    }

<tr>
  <td class="category_div" id="category_div" width=25%>STUDENT BLOCK:</td>
  <td>
    <select id="studBlock" name="studBlock" onchange="javascript:dynamicdropdown(this.options[this.selectedIndex].value);" required>                                                                                         
      <option value="">Select Block</option>
      <option value="I">I</option>
      <option value="J">J</option>
    </select>
  </td>
</tr>

我该如何解决这个问题？

Answer 1

我不确定我是否理解您的问题。这是一个在加载文档时调用新函数 pageLoaded 的示例。在那里你可以初始化字段。

您的代码中有多项内容需要更改。比如多次调用document.getElementById("reserveSlot")是不好的……

另一件事：使用标签作为选项并不好。最好在外面加上label，让options成为options。如果有意义的话，您可以使用<optgroup> 对选项进行分组。

我还将槽的定义移到了数组中。与您使用的方法相比，这使得添加更多插槽更容易，并且输入更少。

const slotOptions =
  {
    "I" : [  "11:20AM" ],
    "J" : [  "1:00AM" ],
  }

function dynamicdropdown(value)
  {
    var options= slotOptions[ value ];

    var slot = document.getElementById("reserveSlot");
    slot.length = 0; // remove all options
    options.forEach(
      function (time) {
        slot.appendChild( new Option(time, time) );
      }
    )
  }

function pageLoaded()
  {
    dynamicdropdown(document.getElementById("studBlock").value);
  }

// Calling pageLoaded when the DOM is loaded
window.addEventListener('DOMContentLoaded', pageLoaded);

<table>
  <tr>
    <td class="category_div" id="category_div" width=25%>STUDENT BLOCK:</td>
    <td>
      <small>Select Block</small><br>
      <select id="studBlock" name="studBlock" onchange="dynamicdropdown(this.value);" required>
        <option value="I">I</option>
        <option value="J">J</option>
      </select>
    </td>
    <td>
      <small>Select Slot</small><br>
      <select id="reserveSlot" name="reserveSlot" required>
      </select>
    </td>
  </tr>
</table>

Answer 2

显然你是从 Javascript 开始的，这就是我应该推进的人

const
  studBlock     = document.getElementById("studBlock"),
  reserveSlot   = document.getElementById("reserveSlot"),
  RS_Option     = {
    'I' : [ ["Select Slot",""] , [ "11:20AM","11:20AM" ] ]
  , 'J' : [ ["Select Slot",""] , [ "11:20AM","11:20AM" ] ]
  };

function Set_reserveSlot()
{
  if ( RS_Option[studBlock.value])
  {
    reserveSlot.innerHTML = '';
    RS_Option[studBlock.value].forEach(function(pair,item)
    {
      reserveSlot[item] = new Option(pair[0],pair[1]) 
    });
  }
}

window.onload = Set_reserveSlot;

studBlock.onchange = Set_reserveSlot;

<select id="studBlock" >                                                                                         
  <option value="">Select Block</option>
  <option value="I">I</option>
  <option value="J">J</option>
</select>

<br>

<select id="reserveSlot"></select>