时间戳

首页 > 解决方案 > 如何根据文本框中的值填充下拉列表？

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

问题描述

我希望根据我在文本框字段中的值显示下拉列表选项。例如，如果文本框中的值为“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>

我该如何解决这个问题？

标签： javascript

解决方案

我不确定我是否理解你的问题。这是一个在加载文档时调用新函数 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>

推荐阅读