change option value based on other dropdown PHP

Question

I have 2 simple dropdown list that if city dropdown selected have value "Balikpapan" its display specific option on service dropdown then if not its display other option :

here's my function code :

function Kurir(){
    var kota = $('select[name="descity"] option:selected').text();
    kurir ='';
    kurir2='';
    if (kota == Balikpapan){
        kurir = '<option selected="true" style="display:none;">Pilih Kurir</option><option value="Kurir dalam Kota">Kurir dalam Kota</option>';
        $('#service').html(kurir);
    else
        kurir2 = '<option selected="true" style="display:none;">Pilih Kurir</option><option value="">Pilih Kurir</option><option value="jne">JNE</option><option value="pos">POS</option><option value="tiki">TIKI</option>';
        $('#service').html(kurir2); 
    }
}

and here's my dropdown code

<td><label for="kota">Kota</label></td>
                  <td><select id="descity" onchange="kurir();" class="" name="">
                     <option value="">Pilih Kurir</option>
                     <option value="Balikpapan">Balikpapan</option>
                     <option value="Malang">Malang</option>
                     <option value="Surabaya">Surabaya</option>
                  </select> 

<td><label for="Kurir">Kurir</label></td>
                  <td><select id="service" onchange="DestVal();PostProvCity();" class="" name="">
                     <option value="">Pilih Kurir</option>
                     <option value="jne">JNE</option>
                     <option value="pos">POS</option>
                     <option value="tiki">TIKI</option>
                  </select>

this $('select[name="descity"] option:selected') selector won't match anything in that html — flauntster, Dec 06 '16 at 06:38
Possible duplicate of [Use jQuery to change a second select list based on the first select list option](http://stackoverflow.com/questions/10570904/use-jquery-to-change-a-second-select-list-based-on-the-first-select-list-option) — Muhammed Shevil KP, Dec 06 '16 at 06:39
@flauntster ah sry the value is postcity, typo on question sry — Gusti Aldi, Dec 06 '16 at 06:41

score 1 · Accepted Answer · answered Dec 06 '16 at 08:07

You can use another option to display dropdown services as mentioned below. You can use ajax throw display content.

Test.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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"></td>
            </tr>
        </table>
     </form>
</body> 
</html>

process-request.php

<?php
if(isset($_POST["country"])){
$country = $_POST["country"];
$countryArr = array("usa" => array("New Yourk", "Los Angeles", "California"),
                    "india" => array("Mumbai", "New Delhi", "Bangalore"),
                    "uk" => array("London", "Manchester", "Liverpool"));
if($country !== 'Select'){
        echo "<label>Services:</label>";
        echo "<select>";
        foreach($countryArr[$country] as $value){
            echo "<option>". $value . "</option>";
        }
        echo "</select>";
    } 
}
?>

Let me know if any query for the same.

thx for this solution, Never thinking this way tho.. thx rly much :) — Gusti Aldi, Dec 07 '16 at 01:32

score 0 · Answer 2 · answered Mar 04 '21 at 05:11

Just a small modification to AddWeb Solution Pvt Ltd answer:

before the ajax function its worth deleting any tags if already present based on a previous selection so this way anytime the user makes a selection, the new results doesn't add to the previous list.

$(document).ready(function(){
    $("select.country").change(function(){
        $("#response option").remove(); // add this line
        var selectedCountry = $(".country option:selected").val();
        $.ajax({
            type: "POST",
            url: "process-request.php",
            data: { country : selectedCountry } 
        }).done(function(data){
            $("#response").html(data);
        });
    });
});

change option value based on other dropdown PHP

2 Answers2

Linked