如何使用两个下拉列表

时间:2018-05-18 18:08:07

标签: javascript php jquery html

在我的应用中有两个下拉列表和一个文本框。第二次下降取决于第一次下拉值。我希望文本框值取决于第二个下拉选择值。

  

形式

<tr>
<td><label>BANK</label></td>
<td>
<select class="form-control" name="bankid" id="vbankid">
<option value="0"></option>
<?php
$result = mysqli_query($conn,"SELECT bankid,bankname FROM bankinfo");
while ($rowc = mysqli_fetch_array($result)) {
echo "<option value=" . $rowc[0] . ">" . $rowc[1];
}
?>
</select>
</td>
</tr>
<tr>
<td><label>ACCOUNT</label></td>
<td>
<select class="form-control" name="acno" id="saccountid">
</select>
</td>
</tr>
<tr>
<td><label>NAME</label></td>
<td><input class="form-control" name="txtname" id="sname"></td>
</tr>
  

的javascript

<script src="../../bower_components/jquery/dist/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

<!-- Metis Menu Plugin JavaScript -->
<script src="../../bower_components/metisMenu/dist/metisMenu.min.js"></script>

<!-- DataTables JavaScript -->
<script src="../../bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="../../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

 <!-- Custom Theme JavaScript -->
<script src="../../dist/js/sb-admin-2.js"></script> 
<script>

$(document).ready(function() {
    $('#dataTables-example').DataTable({
            responsive: true
    });


  $("#vbankid").change(function() {

    $(this).after('<div id="loader"><img src="../../images/loading.gif" alt="loading Topics" /></div>');

    $.get("loadaccount.php?vbankid=" + $(this).val(), function(data) {
        $("#saccountid").html(data);
        $('#loader').slideUp(200, function() {
            $(this).remove();
        });
    });


 });

  $("#saccountid").change(function() {
    var bankid = $("#vbankid").val();

    $(this).after('<div id="loader"><img src="../../images/loading.gif" alt="loading Topics" /></div>');

    $.get("loadname.php?vbankid=" + bankid + "&vaccountid=" + $(this).val(), function(data) {
        $("#sname").html(data);
        $('#loader').slideUp(200, function() {
            $(this).remove();
        });
    });


 });


});
</script>
  

loadname.php

<?php

$accountid = $_GET['vaccountid'];

$bankid = $_GET['vbankid'];

$result=mysqli_query($conn,"SELECT name FROM accountinfo WHERE accountid='$accountid' and bankid='$bankid'");

while($roww=mysqli_fetch_array($result))

{

 echo $roww[0];

}

?>

我搜索了一些问题,但没有任何工作。我不明白问题在哪里。第二个下拉值完全加载,但文本框无效。请帮助我

1 个答案:

答案 0 :(得分:0)

除了错过="&vaccountid" + $(this).val()的拼写错误之外,您还使用了错误的jQuery方法来设置文本输入字段的值。您需要使用.val()

,而不是使用.html()

$("#sname").html(data);替换为$("#sname").val(data);

正如我在第一条评论中所提到的那样,真的应该使用prepared statements进行查询。