change option value based on other dropdown PHP

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>

Answer

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.

Advertisement

Answer