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); 
    }
}

JavaScript
​x
 
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>

JavaScript
 
<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>

JavaScript
 
<!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>";
    } 
}
?>

JavaScript
 
<?phpif(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