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

Question

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

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?

some · Accepted Answer · 2019-04-29 04:06:30Z

1

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>

edited Apr 29, 2019 at 4:06

answered Apr 29, 2019 at 4:01

some

49.8k14 gold badges83 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

need help Over a year ago

thank you i really appreciate you help, but you might get wrong wth the question, can you review back my question, i ve provide some picture on that issue thank you

some Over a year ago

@needhelp I'm sorry, but I don't understand. With my code, the options for slot is set according to the value in block when the page is loaded. If the value of block is changed, the options in slot changes. I removed your options-as-labels and then the first option in the selected one when the page loads.

some Over a year ago

Do you want to populate the block from a list ?

need help Over a year ago

no, from the picture i've provided above, there is no need to select any option for block since the block value which is 'J' is already in the text field. <tr><td width=25%>STUDENT BLOCK :</td> <td><input type="text" id="studBlock" class="form-control" name="studBlock" value="<c:out value="${stud.studBlock}" />" readonly></td></tr>

some Over a year ago

@needhelp Ok... so the block is read only... Do you want to prevent the user from selecting the block? Do you want to set the selected block with your code?

|

Collectives™ on Stack Overflow

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

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related