Set Value for HTML Dropdown based on Another HTML Dropdown Selection

Question

I have an HTML dropdown list, that when a value is selected, it displays a table that corresponds to the selection. I also have an Add Button. Inside the Add Button are 2 fields of information that need filled out, one being a dropdown box. Here is what I need but cannot figure out. I want the selected value on the dropdown in my Add Button to be the number that was already selected in the first dropdown. How can I do this?

Here is the code that I have so far:

<button class="ui-button ui-corner-all ui-widget" id="insertButton">Add Supplier ID</button><br><br>

<div id="dialog-form" title="Add Supplier ID">
  <p class="validateTips">All form fields are required.</p>

<!-- Dialog box displayed after add row button is clicked -->
  <form>
    <fieldset>
      <label for="mr_name">MR_ID</label>
      <select name="mr_id" id="mr_id_dialog" class="text ui-widget-content ui-corner-all" value="300">
          <?php foreach($user->fetchAll() as $user1) { ?>
            <option>
                <?php echo $user1['MR_ID'];?>
            </option>
        <?php } ?>
      </select><br><br>
      <label for="buyer_id">Supplier ID</label>
      <input type="text" name="supp_id" id="supplier_id" class="text ui-widget-content ui-corner-all" value="99">

      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

<!-- Form -->    
<form name="myForm" action="">

<!-- Dropdown List -->
    <select name="master_dropdown" id="mr_id" onChange="updatetable(this.form);">
    <option selected value="select">Choose a MR_ID</option>
        <?php foreach($users->fetchAll() as $user) { ?>
            <option data-name="<?php echo $user['MR_ID'];?>">
                <?php echo $user['MR_ID'];?>
            </option>
        <?php } ?>
    </select>
</form>

<!-- Table -->
<p> 
    <div id="table_div">
        <table border="1" id="index_table" class="ui-widget ui-widget-content" style="display: none">
            <thead>
                <tr class="ui-widget-header">
                <td>MR ID</td>
                <td>Supplier ID</td>
                </tr>
            </thead>
            <?php foreach($users_one->fetchAll() as $supp) { ?>
            <tr>
                <td class="mr_id"><div id="dropdown_selection"></div></td>
                <td class="supp_id"><?php echo $supp['Supp_ID']?></td>
            </tr>
            <?php } ?>
        </table>
    </div>

Community · Accepted Answer · 2017-05-23 11:53:04Z

2

See Events for Select for info on events with Select tag

This can be done with javascript.

Add a change listener to the first dropdown and remove the onChange from the HTML. You can call the updatetable function from within the javascript.

javascript

function bindListeners() {
    var elementToBind = document.querySelector('#mr_id');
    // Check if the element has loaded
    if(elementToBind === undefined) {
        // if not, wait 500ms and retry
        setTimeout(bindListeners, 500);         
    }
    else 
    {
        // Add the event listeners
        elementToBind.addEventListener('change', updateSelection, false);
        elementToBind.addEventListener('click', updateSelection, false);
    }
}
bindListeners();

function updateSelection(event) {
    // Get the value from this select
    var selectedValue = event.target.value;

    // find the select object that you want to set the value for
    var selectObjectToSet = document.querySelector('#mr_id_dialog');
    selectObjectToSet.value = selectedValue;

    // Call the function that was in the onChange listener
    updatetable(this.form);
}

HTML Add Supplier ID

<div id="dialog-form" title="Add Supplier ID">
  <p class="validateTips">All form fields are required.</p>

<!-- Dialog box displayed after add row button is clicked -->
  <form>
    <fieldset>
      <label for="mr_name">MR_ID</label>
      <select name="mr_id" id="mr_id_dialog" class="text ui-widget-content ui-corner-all" value="300">
          <?php foreach($user->fetchAll() as $user1) { ?>
            <option>
                <?php echo $user1['MR_ID'];?>
            </option>
        <?php } ?>
      </select><br><br>
      <label for="buyer_id">Supplier ID</label>
      <input type="text" name="supp_id" id="supplier_id" class="text ui-widget-content ui-corner-all" value="99">

      <!-- Allow form submission with keyboard without duplicating the dialog button -->
      <input type="submit" id="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
  </form>
</div>

<!-- Form -->    
<form name="myForm" action="">

<!-- Dropdown List -->
    <select name="master_dropdown" id="mr_id" onChange="updatetable(this.form);">
    <option selected value="select">Choose a MR_ID</option>
        <?php foreach($users->fetchAll() as $user) { ?>
            <option data-name="<?php echo $user['MR_ID'];?>">
                <?php echo $user['MR_ID'];?>
            </option>
        <?php } ?>
    </select>
</form>

<!-- Table -->
<p> 
    <div id="table_div">
        <table border="1" id="index_table" class="ui-widget ui-widget-content" style="display: none">
            <thead>
                <tr class="ui-widget-header">
                <td>MR ID</td>
                <td>Supplier ID</td>
                </tr>
            </thead>
            <?php foreach($users_one->fetchAll() as $supp) { ?>
            <tr>
                <td class="mr_id"><div id="dropdown_selection"></div></td>
                <td class="supp_id"><?php echo $supp['Supp_ID']?></td>
            </tr>
            <?php } ?>
        </table>
    </div>
</p>

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Dec 12, 2016 at 18:49

bobjoe

6736 silver badges11 bronze badges

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

14 Comments

Rataiczak24 Over a year ago

So what should my HTML look like then?

bobjoe Over a year ago

Just remove the onChange attribute from mr_id select, and add the javascript in a script tag at the end

Rataiczak24 Over a year ago

That works! Anyway to put that into my JS instead of the HTML code to keep it cleaner for myself?

bobjoe Over a year ago

Create a file, call it something.js.

bobjoe Over a year ago

Then, in your script tag change it to <script type="text/javascript" src="./something.js"></script>

|

Collectives™ on Stack Overflow

Set Value for HTML Dropdown based on Another HTML Dropdown Selection

1 Answer 1

14 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

14 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related