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

时间:2015-04-10 17:10:12

标签: javascript php mysql select drop-down-menu

我有一个基于另一个下拉列表的下拉列表并尝试将数据插入数据库但是有问题并建议如何操作

<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年级”并选择其中一个看似不起作用的列表时,只有“网络”进入数据库我看代码但我找不到为什么不工作

2-当我选择4级或5级并返回以选择1级,2级或3级时,我想重置数据库中的“dept_name”列(仅当我们选择错误并在更新时更改“< / p>

1 个答案:

答案 0 :(得分:0)

不确定我是否在这里打了标记,但检查出来。 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);
    });
});