时间戳

首页 > 解决方案 > 使用 jquery-easyui 根据从 mysql 中选择的组合框填充文本框

javascript - 使用 jquery-easyui 根据从 mysql 中选择的组合框填充文本框

问题描述

我应该如何根据从 MySQL 数据库中选择的 easyui-combobox 值自动填充 easyui-textbox？

数据库：my_db
表：tbl_blocks

"id"---"block"---"module"---"station"---"hectares"

   1      1A      mod 1      stn 3       1.20 has        
   2      1B      mod 2      stn 2       2.8  has

示例：当我根据组合框 ( block-"1A") 的选项进行选择时，文本框会自动填充数据。我的源代码如下。

<!----- index.php------->
<html>
<head>
    <link rel='stylesheet'
          href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
    <title></title>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- 
        awesome.min.css'>
    <link rel='stylesheet' type='text/css'
          href='https://www.jeasyui.com/easyui/themes/default/easyui.css'>
    <link rel='stylesheet' type='text/css' href='https://www.jeasyui.com/easyui/themes/icon.css'>
    <script type='text/javascript' src='https://www.jeasyui.com/easyui/jquery.easyui.min.js'></script>

    <script type='text/javascript'>
        $(document).ready(function() {
            $('#block').keyup(function() {
                var sid = $(this).val();
                //alert(sid);
                var data_String = 'sid=' + sid;
                $.get('process.php', data_String, function(result) {
                    $.each(result, function() {
                        $('#block').val(this.block);
                        $('#module').val(this.module);
                        $('#station').val(this.station);
                        $('#hectares').val(this.hectares);
                    });
                });
            });
        });
    </script>
</head>

<body>
<br><br><br>
<div class='col-md-4 col-md-offset-3'>

    <?php
    $con=mysqli_connect("localhost", "root", "", "my_db");
    $resultSet = $con->query("SELECT block FROM tbl_blocks");
    ?>
    <div style='margin-bottom:10px'>
        <select name='block' id='block' class='easyui-combobox' style='width:100%' data-
                options="editable:false, prompt:'Select block'">

            <?php
            while($rows = $resultSet->fetch_assoc())
            {
                $block = $rows['block'];

                echo "
      <option value='$block'>$block</option>
      ";
            }
            ?>
        </select>
    </div>

    <div style='margin-bottom:10px'>
        <input name='module' id='module' required='true' class='easyui-textbox' style='width:100%'
               data-options="editable:false, prompt:'Module'">
    </div>
    <div style='margin-bottom:10px'>
        <input name='station' id='station' required='true' class='easyui-textbox' style='width:100%'
               data-options="editable:false, prompt:'Station'">
    </div>
    <div style='margin-bottom:10px'>
        <input name='hectares' id='hectares' required='true' class='easyui-textbox' style='width:100%'
               data-options="editable:false, prompt:'hectares'">
    </div>
    </form>
</div>
</div>
</body>
</html>

<!----- process.php------->
<?php
header('Content-Type: application/json');
$response = array();
if (isset($_GET['sid'])){
    $con=mysqli_connect("localhost", "root", "", "my_db");
    if (mysqli_connect_errno()){
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $qry = "SELECT * FROM tbl_blocks WHERE block = '".$_GET['sid']."' ";
    $result = mysqli_query($con, $qry);
    while ($row = mysqli_fetch_array($result, MYSQL_BOTH)) {
        array_push($response, $row);
    }
    echo json_encode($response);
}
?>

标签： javascriptjquery-easyui

解决方案

推荐阅读