PHP - вставка данных из выпадающего списка на основе другого одного

Question

У меня есть выпадающий список на основе другого списка и пытается вставить данные в базу данных, но есть проблема, и предложение, как сделать

<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- проблема, когда я выбираю «Класс 4» и выберите один из списка, как представляется, не работает и только «Networking» перейти в базу данных я смотрю на код б ut Не могу найти, почему не работает

2- Когда я выберу класс 4 или 5 и вернусь, чтобы выбрать класс 1, 2 или 3, я хочу сбросить столбец «dept_name» в базе данных (это только если мы выберите по ошибке и измените его при обновлении «

Answer 1

Не уверен, что я попал в цель, но проверьте его. jsFiddle пример: 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); 
    }); 
});