By selecting an option from the select menu how to force another select menu to automatically load a specific option?

Question

By selecting an option from the select menu how to force another select menu to automatically load a specific option?

What i mean is that i have this php code :

   <select id="video_cattegory_main" name="video_cattegory_main" style="display:inline; width:95%">
            <?php $query_main_menue = "SELECT video_cattegory_main FROM video_tutorials GROUP BY video_cattegory_main";
            $main_menue = mysql_query($query_main_menue, $webiceberg) or die(mysql_error());
            while ($row_main_menue = mysql_fetch_assoc($main_menue))  {  ?>
            <option name="video_cattegory_main" value="<?php echo $row_main_menue['video_cattegory_main']?>" ><?php echo $row_main_menue['video_cattegory_main']?></option>
            <?php } ?>
          </select>

What this dose it loads the values from the table into the select menu , I have another select menu just like this one but in the second one i want it to load based on the selection of the first .

In other words what would be the best approach so that when select one option in a select menu automatically it forces a default value in another select menu

Can this be done solely in php or will i need to add js which i have very little knowledge of

Answer 1

Yes you have to use javascript for this purpose. Javascript alone will be enough when you load all values of the second select-dropdownbox when loading the page.

If the displayed values of the second dropdown-box will depend on the choice of the first select-box, than you will probably need AJAX, eg when the first dropdown-box displays a country and when selecting one you want to display certain cities out of this country!

The first thing can be achieved quite easily depending on what you want to select in the second box. If you have very little knowledge of javascript, you could use eg jquery, which is an awesome framework which makes it easy to solve such exercises!

But for this you must give more information about which choice of selectbox 1 should auto select which option of selectbox 2!

You could use the onchange() ( link ) function of jquery, eg look at that simple example ! Instead of displaying a text you could change the selected value of a second select-box via http://api.jquery.com/val/

Answer 2

You can do this with PHP without the use of any Javascript but it will mean that you have to refresh the page. I would recommend Javascript though.

The best way to do it with PHP would be to have a form that posts data to itself. After the first select box is selected there should be a submit button.

The PHP script would then check to see whether the first select has been submitted. If it has been, the second one would be generated based on the values from the first. If it has not been, the form would be outputted without the second select.

Again Javascript is a better solution as the PHP solution would raise other problems like the handling of other form variables.

Answer 3

You need to use Javascript.

PHP is a server-side programming language. So PHP code is run before a client is able to see the webpage. When the webpage is visible at the client, PHP can not modify the page.

Javascript is a client-side language. It allows you to modify the DOM (HTML) while an user is still viewing the page.

This snippet should get you started.

<select id="select-0">
    <option value="0">a0</option>
    <option value="1">a1</option>
    <option value="2">a2</option>
    <option value="3">a3</option>
</select>

<select id="select-1">
    <option value="0">b0</option>
    <option value="1">b1</option>
    <option value="2">b2</option>
    <option value="3">b3</option>
</select>

<script type="text/javascript">
// select a specific element
var element = document.getElementById('select-0');

// add a "listener" that allows you to run code when an event occurs
element.addEventListener('change', function() {
    // select-0 is changed, so we wish to change the value of select-1
});
</script>