How to refresh drop-down list on parent page

Question

I have a drop-down list on a PHP/HTML page. I have a button beside it which when clicked opens a pop-up window via which I can add more items to the drop down list (it gets stored in a mysql table). When I close the pop-up window it should trigger an event which in turn should refresh the drop-down list on parent page.

How to do it? Thanks!

Edit: There are 2 drop-down lists on the page. Options list in 2nd DDL depend on the selection made in 1st DDL. Beside 2nd DDL, there is an button which opens a pop-up window. Using the PPW one can add options to 2nd DDL (stored in mysql table).

Now the pop-up window option is working perfectly, data is getting saved in the table. Right now only option for me is to refresh the page. I want an event to occur when close button on PPW is clicked. This event should refresh the 1st DDL in such a way that option selected previously remains selected. Can it also do this: data added by me should be selected in 2nd DDL.

Code

1st DDL

<td>State Name</td> 
<td><select id="a" name="a" onchange="ajax(this.value);">
<option value="">Select State Name</option>
<?php
$sql = "SELECT * FROM State";
$abc = mysql_query($sql);   
while($row = mysql_fetch_array($abc)){ 
echo "<option value=\"".$row['scode']."\">".$row['State']."</option>\n";}
?>
</select></td>

2nd DDL

<td>School Name</td>
<td><select name="schname">
<option value="">Select School Name</option></select>
<A href="addsch.php?State=<?php echo $state?>&scode=<?php echo $scode?>"Target='_blank'>Add New School Name</a></td>

The ajax function named 'ab' does the refresh when 1st DDL is selected.

addsch.php opens a form in a pop-up window with a submit button which saves the form data to mysql table.

Example: I select 'State1' from 1st DDL, school names in for 'State1' are displayed in 2nd DDL. I want to add one school name (say 'State2' to 2nd DDL, so I use the add option. After saving the form data, I want 1st DDL to refresh in such a way that 'State1' remains there and 2nd DDL shows 'State2'. Otherwise atleast 1st DDL is refreshed then the user can select 'State2' from 2nd DDL himself.

How to do this?

Answer 1

If it is stored into a MYSQL table there is no way for the system to refresh your dropdown list without actually refreshing the page. If I've understood everything correctly this might help you :

Open popup and refresh parent page on close popup

If you do not wish to refresh the page but only your dropdown list then you'll have to make an AJAX function yourself.

Edit: By the look of it you'd better be off refreshing the whole page and doing a javascript function which would store the value from the option input into a session array and everytime you would load this page it would look for this value. And if the key isn't set then the first option in your first list would be selected.

Take a quick look at this js fiddle :

https://jsfiddle.net/98k456ho/1/

Needs jQuery

Unfortunately it doesnt work as it uses sessionStorage, but you can paste this in your php file and it should work.

sessionStorage is similar to localStorage is allows you to store key/value "object" which can be accessed pretty quickly. It allows you to store more data compared to a simple cookie.

What this code does is that everytime you choose an option from your list, the value is stored into a session array. Everytime the page is loaded it will look for the value into the session and if the first value was selected or not a single value was selected by the user it will set the default value to "Select".

In your case if the user selects for example "California" he gets access to all the options in your second list. After closing your popup since everything is stored into the session everything will be the same.

One important thing to note, is that the javascript needs to run before you even do your mysql query else the value in your first dropdown will be selected but you'll get no or wrong values into your second list.