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")是不好的……

另一件事：使用标签作为选项不是很好。最好在外部添加标签，然后将选项作为选项。如果可以的话，可以用<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

很明显，您是从Java语言入手的，这是谁应该使我前进

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>

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

2 个答案: