CODEWITHSUNDEEP
javascript
need help
need help

Reputation: 19

How to populate dropdown list based on value in a text box?

I want the dropdown list option to be displayed based on my value in the text box field. For example, if the value in the text box is 'J' then the dropdown list should display the value for 'J'. It is not populated the dropdown from another dropdown, it is populated a dropdown based on the value in the text box.

This is what i mean when the value in the text box field is J, then it should display the slot based on 'J':

Image

This is the code I've made, but I want to change like it does not need to select an option from the first dropdown. 

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>

How do I solve this problem?

Upvotes: 1

Views: 1086

Answers (1)

some
some

Reputation: 49582

I'm not sure if I understand your question. Here is an example that calls a new function pageLoaded when the document is loaded. There you can initialize the fields.

There are multiple things that should be changed in your code. For example, calling document.getElementById("reserveSlot") multiple times is bad...

Another thing: using labels as options is not good. It's better to add the label outside, and let the options be options. You can group the options with <optgroup> if that makes sense.

I also moved the definitions of the slots to and object with arrays. That makes it easier to add more slots, and it less to type than the method you where using.

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>

Upvotes: 1

Related Questions