CODEWITHSUNDEEP
phpmysql
thowzif
thowzif

Reputation: 103

Show drop down values of a select based on another select

I have a table for 'Projects' as below

Project_ID   |   Client_ID
---------------------------
    P1              C1
    P2              C1
    P3              C2
    P4              C2
    P5              C3
    P6              C3

I have a select id="1" that shows all the Client ID's.

I'm showing an another select id="2" to show all the projects assigned to the client ID's.

Basically i want to show option values for select id="2" based on the selected value from select id="1".

Example if some one selects

<option value="C3">C3</option>

Then below should be there

<select id="2">
    <option value="P5">P5</option>
    <option value="P6">P6</option>
</select>

Im thinking Ajax is the answer but i dont know a proper way to do it.

Upvotes: 1

Views: 14922

Answers (3)

vipul
vipul

Reputation: 9

You can fire up an event on the first select being changed and make an ajax call with the id of item of first select. Then get contents through ajax and dynamically create options with the data you get and fill the second select box.

$(document).on('change','select#1',function(){
var id = $(this).val();
$.ajax({
    method: 'POST',
    url: 'your-url',
    data: {'id' : id},
    success: function(data){

       //generate options dynamically
       $('select#2').html('');  
       $('select#2').html('the options you generated');
    }
});

});

Upvotes: 0

kofrasa
kofrasa

Reputation: 2140

You can apply a select changed event on <select id="1"> and dynamically populate <select id="2"> when the event triggers. It will help to also properly name your select elements so they are easy to identify.

Upvotes: -1

Shakti Phartiyal
Shakti Phartiyal

Reputation: 6254

You can add an event listener for the onChange event of the select box. On the change event get the value of the select box and send its value to the server using an ajax request and fetch the value you want to show in the second select box based on the first one's value and show it in the second select box. Example Code for state selection based on country selection:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Populate City Dropdown Using jQuery Ajax</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("select.country").change(function(){
        var selectedCountry = $(".country option:selected").val();
        $.ajax({
            type: "POST",
            url: "process-request.php",
            data: { country : selectedCountry } 
        }).done(function(data){
            $("#response").html(data);
        });
    });
});
</script>
</head>
<body>
<form>
    <table>
        <tr>
            <td>
                <label>Country:</label>
                <select class="country">
                    <option>Select</option>
                    <option value="usa">United States</option>
                    <option value="india">India</option>
                    <option value="uk">United Kingdom</option>
                </select>
            </td>
            <td id="response">
                <!--Response will be inserted here-->
            </td>
        </tr>
    </table>
</form>
</body> 
</html>

Backend:

<?php
if(isset($_POST["country"])){
    // Capture selected country
    $country = $_POST["country"];

    // Define country and city array
    $countryArr = array(
                    "usa" => array("New Yourk", "Los Angeles", "California"),
                    "india" => array("Mumbai", "New Delhi", "Bangalore"),
                    "uk" => array("London", "Manchester", "Liverpool")
                );

    // Display city dropdown based on country name
    if($country !== 'Select'){
        echo "<label>City:</label>";
        echo "<select>";
        foreach($countryArr[$country] as $value){
            echo "<option>". $value . "</option>";
        }
        echo "</select>";
    } 
}
?>

Upvotes: 5

Related Questions