PHP - 根据下一个列表从下拉列表中插入数据

Question

I have a dropdown list based on another dropdown list and trying to insert data to the database but there's a problem and suggestion how to do

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

  <style type="text/css">
    tr.method_options { display: none; }
  </style>

<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$(document).ready(function(){

    $('#id_grade_number').on('change', function() {         

        $('tr.method_options').hide();
        $('#tr_' + $(this).val() ).show();

    });

});

});//]]>  

<label for="id_application_method"  class="col-sm-4 col-md-3 col-lg-2 control-label">Grade:</label>
         <div class="col-sm-4 col-md-4">
         <table>
    <select name="grade_number" id="id_grade_number"  class="form-control"  value="<?php if(Form::value("grade_number") == ""){ echo $req_user_info['grade_number']; } else { echo Form::value("grade_number"); }?>">
    <option value="Grade not selected">Select your grade</option>
    <option value="1">Grade 1</option>
    <option value="2">Grade 2</option>
    <option value="3">Grade 3</option>
    <option value="4">Grade 4</option>
    <option value="5">Grade 5</option>
    </select></td></tr>

    <tr id="tr_4" class="method_options" class="col-sm-4 col-md-3 col-lg-2 control-label" style="display: none;">
    <th><label for="id_4" style=" padding-top: 25px; margin-bottom: 21px;" >Your Department:&nbsp;&nbsp;</label></th><td>
    <select name="dept_name" id="id_4"  class="form-control" value="<?php if(Form::value("dept_name") == ""){ echo $req_user_info['dept_name']; } else { echo Form::value("dept_name"); }?>" >
    <option value="Networking" >Networking</option>
    <option value="Programming">Programming</option>
    <option value="Web Developmentoop">Web Development</option>

    </select></td></tr>

    <tr id="tr_5" class="method_options" class="col-sm-4 col-md-3 col-lg-2 control-label" style="display: none;">
    <th><label for="id_5" style="padding-top: 24px; margin-bottom: 5px;">Your Department: &nbsp;&nbsp;</label></th><td>
    <select name="dept_name" id="id_5"  class="form-control"  value="<?php if(Form::value("dept_name") == ""){ echo $req_user_info['dept_name']; } else { echo Form::value("dept_name"); }?>">
    <option value="Networking" >Networking</option>
    <option value="Programming">Programming</option>
    <option value="Web Development">Web Development</option>
    </select></td></tr>
    </tbody></table>       
                     </div>

1- the problem is when I choose " Grade 4 " and select one of the list that appear not working and only " Networking " go to the database I look at the code but I can't find why not working

2- When I choose Grade 4 or 5 and return to select Grade 1 , 2 or 3 I want to reset the " dept_name " column in the database (this is only if we select by mistake and change it when updating "

Answer 1

Not sure I hit the mark here, but check it out. jsFiddle example: http://jsfiddle.net/Twisty/mcp3n4fn/2/

HTML

<div class="col-sm-4 col-md-4">
    <table>
        <tbody id="first_option">
            <tr>
                <th>Grade:</th>
            </tr>
            <tr>
                <td>
                    <select name="grade_number" id="id_grade_number" class="form-control">
                        <option value="Grade not selected">Select your grade</option>
                        <option value="1">Grade 1</option>
                        <option value="2">Grade 2</option>
                        <option value="3">Grade 3</option>
                        <option value="4">Grade 4</option>
                        <option value="5">Grade 5</option>
                    </select>
                </td>
            </tr>
        </tbody>
        <tbody id="tr_4" class="method_hidden">
            <tr>
                <th>Department:</th>
            </tr>
            <tr>
                <td>
                    <select name="dept_name" id="id_4" class="form-control">
                        <option></option>
                        <option value="Networking">Networking</option>
                        <option value="Programming">Programming</option>
                        <option value="Web Developmentoop">Web Development</option>
                    </select>
                </td>
            </tr>
        </tbody>
        <tbody id="tr_5" class="method_hidden">
            <tr>
                <th>Department:</th>
            </tr>
            <tr>
                <td>
                    <select name="dept_name" id="id_5" class="form-control">
                        <option></option>
                        <option value="Networking">Networking</option>
                        <option value="Programming">Programming</option>
                        <option value="Web Development">Web Development</option>
                    </select>
                </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

tr th, tr td {
    line-height: 1.5em;
}
.method_hidden {
    display: none;
}

JQUERY

var selGrade, selDept;
$(function () {
    $('#id_grade_number').on('change', function () {
        selGrade = $(this).find("option:selected").text();
        var nextVal = $(this).val();
        $('.method_hidden').hide();
        $('#tr_' + nextVal).show();
    });
    $("select[name='dept_name']").on('change', function () {
        selDept = $(this).find("option:selected").text();
        alert("Selected " + selGrade + " > " + selDept);
    });
});