select选择原

tianyawhl

发布于 2019-04-04 11:37:02

1.2K0

发布于 2019-04-04 11:37:02

使用select选择，下面展示出选择的内容，用2种方法实现

一、未用bootstrap Table插件写法

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>select选择</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/main.css">
    <style type="text/css">
     select{margin-bottom:20px;}
    </style>
</head>

<body>
    <div class="container">
        <select name="" id="" class="form-control">
		<option value="0" class="firstopt">请选择所有</option>
		</select>
        <table class="table table-bordered">
            <tr class='firsttr'>
                <td>id</td>
                <td>name</td>
                <td>website</td>
                <td>texa</td>
                <td>country</td>
            </tr>
        </table>
    </div>
    <script type="text/javascript" src="../jQuery/jQuery-2.1.4.min.js">
    </script>
    <script type="text/javascript" src="js/app.js">
    </script>
    <script type="text/javascript">
    $(function() {
        var select = $(".container select");
        var table = $(".container table");
		var objectdata;
        var init_data_url = "select.php?action=init_data_list";
        $.get(init_data_url, function(data) {
            //alert(data);
            objectdata = $.parseJSON(data);
			//alert(objectdata);
            for (i = 0; i < objectdata.length; i++) {
                var option = $("<option></option>");
                option.attr("value", objectdata[i].id)
                option.html(objectdata[i].name);
                select.append(option);
				var tr = $("<tr></tr>");
                    for (var j in objectdata[i]) {
                        var td = $("<td></td>");
                        td.html(objectdata[i][j]);
                        tr.append(td);
                        table.append(tr);
                    }
            }
        })

        $(select).change(function() {

            $("tr:not(.firsttr)").remove();
            var optionValue = $("select").val();
            $.post("select.php?action=data_list", { id: optionValue }, function(res) {
                var objectdata1 = $.parseJSON(res);
                for (var i = 0; i < objectdata1.length; i++) {
                    var tr = $("<tr></tr>");
                    for (var j in objectdata1[i]) {
                        var td = $("<td></td>");
                        td.html(objectdata1[i][j]);
                        tr.append(td);
                        table.append(tr);
                    }
                }


            })
			
        })

    })
    </script>
</body>

</html>

<?php
$action = $_GET['action'];
switch ($action) {
    case 'init_data_list':
        init_data_list();
        break;

    case 'data_list':
        data_list();
        break;
}
/**
 *
 */
function init_data_list()
{
    $sql = "SELECT * FROM website";
    $query = query_sql($sql);
    while ($row = $query->fetch_assoc()) {
        $data[] = $row;
    }
    echo json_encode($data);
}

function data_list()
{
    //http://localhost/phpajaxEditTable/select.php?action=data_list&id=1 可以直接输入获取数据，以id=1为例
    $dataid = $_POST["id"];
    //$dataid = $_GET["id"];
    if ($dataid == 0) {
        $sql = "SELECT * FROM website";
    } else {
        $sql = "SELECT * FROM website WHERE id =" . $dataid;
    }
    $query = query_sql($sql);
    while ($row = $query->fetch_assoc()) {
        $data[] = $row;
    }
    echo json_encode($data);
}

function query_sql()
{
    $mysqli = new mysqli("127.0.0.1", "root", "123", "demodb");
    $sqls = func_get_args();
    foreach ($sqls as $s) {
        $query = $mysqli->query($s);
    }
    $mysqli->close();
    return $query;
}

?>

二、使用bootstrap Table插件写法

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>AdminLTE 2 | ChartJS</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.5 -->
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../plugins/bootstrap-table-develop/src/bootstrap-table.css">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="fixed skin-white">
    <div>
        <select name="" id="select" class="form-control" style="margin-bottom:20px;">
            <option value="0" class="firstopt">请选择所有</option>
        </select>
        <table class="table-striped table-hasthead" id="tableTest1">
            <thead>
                <tr>
                    <th data-field="id">Id</th>
                    <th data-field="name">Name</th>
                    <th data-field="url">Website</th>
                    <th data-field="alex">Texa</th>
                    <th data-field="country">Country</th>
                </tr>
            </thead>
        </table>
    </div>
    <!-- jQuery 2.1.4 -->
    <script src="../jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../plugins/bootstrap-table-develop/src/bootstrap-table.js"></script>
    <script src="../plugins/bootstrap-table-develop/src/locale/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript">
   
    $(function() {
        var url = "selectBtTable.php?action=init_data_list";
        var select = $("select");
        var objectData;
        var init_data_url = "select.php?action=init_data_list";
        $.get(init_data_url, function(data) {
            objectData = $.parseJSON(data);
            for (var i = 0; i < objectData.length; i++) {
                var option = $("<option></option>")
                option.attr("value", objectData[i].id)
                option.html(objectData[i].name)
                select.append(option)
            }
        })

        $('#tableTest1').bootstrapTable({
            height: $(window).height() - 360,
            url: url
        });
        $(window).resize(function() {
            $('#tableTest1').bootstrapTable('resetView');
        });
        $("select").change(function() {
            var optionValue = $("select").val();
            alert(optionValue)
            //url="select.php?action=init_data_list&id=optionValue";

            $('#tableTest1').bootstrapTable('refresh', { url: "selectBtTable.php?action=data_list&id=" + optionValue });

        })


    });
    </script>
    <!-- page script -->
</body>

</html>

<?php
$action = $_GET['action'];
switch ($action) {
    case 'init_data_list':
        init_data_list();
        break;

    case 'data_list':
        data_list();
        break;

}
/**
 *
 */
function init_data_list()
{
    $sql = "SELECT * FROM website";
    $query = query_sql($sql);
    while ($row = $query->fetch_assoc()) {
        $data[] = $row;
    }
    echo json_encode($data);
}

function data_list()
{
    //http://localhost/phpajaxEditTable/select.php?action=data_list&id=1 可以直接输入获取数据，以id=1为例
    //$dataid = $_POST["id"];
    $dataid = $_GET["id"];//获取?action=data_list&id=1的参数只能用_GET
    if ($dataid == 0) {
        $sql = "SELECT * FROM website";
    } else {
        $sql = "SELECT * FROM website WHERE id =" . $dataid;
    }
    $query = query_sql($sql);
    while ($row = $query->fetch_assoc()) {
        $data[] = $row;
    }
    echo json_encode($data);
}

function query_sql()
{
    $mysqli = new mysqli("127.0.0.1", "root", "123", "demodb");
    $sqls = func_get_args();
    foreach ($sqls as $s) {
        $query = $mysqli->query($s);
    }
    $mysqli->close();
    return $query;
}

?>

//http://localhost/phpajaxEditTable/select.php?action=data_list&id=1 可以直接输入获取数据，以id=1为例

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2017/12/12 ，如有侵权请联系 cloudcommunity@tencent.com 删除

bootstrap

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

bootstrap

编程算法

登录后参与评论

0 条评论

热度

select选择原

select选择原

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

select选择 原

select选择 原

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

select选择原

select选择原