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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.