根据另一个选择标记选择值选择标记选项

Question

I have a form in which are two select tags used. I want second select tag's options to be dependent on the selected value of the first select tag. Please I need help. It can be in either php or javascript. This is my code:

<form action="" method="post">
<ul>
<li>
<i>*All fields marked with asterisk are required!</i><br>
<li>
<br>
<select name="service_type">
<option value="" selected>*Select Service Type</option>
<option value="Business Service">Busines</option>
<option value="Research Service">Sales</option>
<option value="Training Service">Typing</option>
</select>
</li>
<li>
<br>
<select name="service_detail">
<option value="" selected>*Select Service Detail</option>
<?php
if (selected = 'business') {
<option value="pharmacy">pharmacy</option>
<option value="pharmacy">pharmacy</option>
} else if(selected = 'sales') {
<option value="drugs">drugs</option>
<option value="books">books</option>
} else if(selected = 'typing') {
<option value="story">story</option>
<option value="news">news</option>
}
?>
</select> 
</form>

Answer 1

Please check for the solution

$(document).ready(function(){
    $("#serviceType").on("change", function(){
        var val = $("#serviceType").val();
        $('#serviceDetail').empty().append('<option val="">*Select Service Detail</option>');
        if(val == "Business Service"){
            $('#serviceDetail').append('<option val="pharmacy">pharmacy</option>');
            $('#serviceDetail').append('<option val="pharmacy">pharmacy</option>');
        }
        else if(val == "Research Service"){
            $('#serviceDetail').append('<option val="drugs">drugs</option>');
            $('#serviceDetail').append('<option val="books">books</option>');
        }
        else if(val == "Training Service"){
            $('#serviceDetail').append('<option val="story">story</option>');
            $('#serviceDetail').append('<option val="news">news</option>');
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="" method="post">
<ul>
<li>
<i>*All fields marked with asterisk are required!</i><br>
<li>
<br>
<select name="service_type" id="serviceType">
<option value="" selected>*Select Service Type</option>
<option value="Business Service">Busines</option>
<option value="Research Service">Sales</option>
<option value="Training Service">Typing</option>
</select>
</li>
<li>
<br>
<select name="service_detail" id="serviceDetail">
<option value="" selected>*Select Service Detail</option>
</select> 
</form>

http://jsfiddle.net/87cd8tms/2/

</div>