选择标记选项,具体取决于所选的另一个选择标记值

时间:2015-07-05 10:48:52

标签: javascript php

我有一个表格,其中使用了两个选择标签。我希望第二个选择标记的选项取决于第一个选择标记的选定值。我需要帮助。它可以是php或javascript。这是我的代码:

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

1 个答案:

答案 0 :(得分:1)

请检查解决方案

&#13;
&#13;
$(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>');
        }
    });
});
&#13;
<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>
&#13;
&#13;
&#13;

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