个人中心
gpt4 book ai didi

php - 如何在 php bootstrap 模式中使用依赖下拉列表？

转载 作者：可可西里 更新时间：2023-11-01 08:09:16 26 4
gpt4 key购买 nike

我想在引导模式中实现下拉列表。我已经有一个演示代码，但我不知道如何在引导模式中实现它。

在 Bootstrap 模态表单中，将打开 2 个相关的下拉菜单，提交后，这些值将保存到数据库中。

非常感谢。

index.php

    <!DOCTYPE html>
<html>
<head>
    <title>PHP - dependent dropdown list</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://demo.itsolutionstuff.com/plugin/bootstrap-3.min.css">
</head>
<body>


<div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">Select State and get bellow Related City</div>
      <div class="panel-body">
            <div class="form-group">
                <label for="title">Select State:</label>
                <select name="state" class="form-control">
                    <option value="">--- Select State ---</option>


                    <?php
                        require('db_config.php');
                        $sql = "SELECT * FROM demo_state"; 
                        $result = $mysqli->query($sql);
                        while($row = $result->fetch_assoc()){
                            echo "<option value='".$row['id']."'>".$row['name']."</option>";
                        }
                    ?>


                </select>
            </div>


            <div class="form-group">
                <label for="title">Select City:</label>
                <select name="city" class="form-control" style="width:350px">
                </select>
            </div>


      </div>
    </div>
</div>


<script>
$( "select[name='state']" ).change(function () {
    var stateID = $(this).val();


    if(stateID) {


        $.ajax({
            url: "ajaxpro.php",
            dataType: 'Json',
            data: {'id':stateID},
            success: function(data) {
                $('select[name="city"]').empty();
                $.each(data, function(key, value) {
                    $('select[name="city"]').append('<option value="'+ key +'">'+ value +'</option>');
                });
            }
        });


    }else{
        $('select[name="city"]').empty();
    }
});
</script>


</body>
</html>

ajaxpro.php

<?php


   require('db_config.php');


   $sql = "SELECT * FROM demo_cities
         WHERE state_id LIKE '%".$_GET['id']."%'"; 


   $result = $mysqli->query($sql);


   $json = [];
   while($row = $result->fetch_assoc()){
        $json[$row['id']] = $row['name'];
   }


   echo json_encode($json);
?>

the output of dependent dropdownlists, I want to open and submit these dropdowns in bootstrap modal

请帮助我..非常感谢。

最佳答案

index.php

<?php 
    include("db/db.php");
    $select_country = "SELECT country_id,country_name from country";
    $result_country = mysqli_query($con,$select_country);
?>
<!DOCTYPE html>
<html>
<head>
    <title>ADDRESS FORM</title>
    <script type="text/javascript" src="js/jquery.3.2.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <script type="text/javascript">
        $(document).on("click","#reg",function(){
            $(".modal-title").html("Registration Form");
            $("#myModal").modal({backdrop: "static", keyboard: false});
        });
        $(document).on("click","#adddata",function(e){
            var state = parseInt($("#selectstate").val());
            var country = parseInt($("#selectcountry").val());
            console.log(state+country);
            $.ajax({
                type : 'POST',
                url : 'insert_all.php?action=ins_std',
                data : {'state': state,'country' : country},
                dataType : "JSON",
                success:function(feedback){
                    if(feedback=="yes"){
                        $(".alert2").html("<b style='color:green;'>Recored Successfully Added </b>");
                        $("#std-form")[0].reset();
                        $("#myModal").modal('hide');
                        $(".has-error").removeClass("has-error");
                        $(".alert2").show().delay(5000).fadeOut();
                    } else{
                        $("#alert").show();
                        $(".alert1").html("<b style='color:red;'> Cant Add Recored </b>");
                        $(".alert1").show().delay(5000).fadeOut();
                    }   
                }
            });
        });
        $(document).on("change","#selectcountry",function(){
        var c_id = parseInt($("#selectcountry").val());
        console.log(c_id);
        $.ajax({
            type : 'POST',
            url : 'get_asc.php',
            data : {'country_id' : c_id},
            success : function(feedback)
            {
                $("#selectstate").html(feedback);
            }
        });
    });
    </script>
</head>
<body>
<div class="container">
    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" id="btn_close">&times;</button>
                    <h4 class="modal-title"></h4><div class="alert1" id="alert"></div>
                </div>
                <div class="modal-body">
                    <form name="add" method="post" id="std-form">
                        <div class="form-group item-required" id="selectcountryerror">
                          <label for="country">Country</label>
                          <select id="selectcountry" name="selectcountry" class="form-control input-value">
                            <option value="">Select Country</option>
                        <?php foreach ($result_country as $country) { ?>
                            <option value="<?php echo $country["country_id"]?>"><?php echo $country["country_name"]?></option>
                        <?php } ?>
                        </select>
                        </div>

                        <div class="form-group item-required" id="selectstateerror">
                        <label for="state">State</label>
                        <select id="selectstate" name="selectstate" class="form-control input-value">
                            <option value="">Select State</option>
                        </select>
                        </div>
                        <div class="form-group" id="areaerror">
                            <button type="button" class="btn btn-default" id="adddata" >Add Data</button>
                            <button type="button" class="btn btn-default" id="savedata" data-dismiss="">Save Data</button><br>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">

                    <button type="button" class="btn btn-default btnclose" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <center>
        <button type="button" class="btn btn-info btn-md" id="reg" >Click Here For Registration Form</button>
    </center>
</div>
</body>

get_asc.php

 **insert/select page**
<?php
    include("db/db.php"); 
    if(isset($_POST['country_id']))
    {
        $select_state = "SELECT state_id,c_id,state_name from state where c_id = '".$_POST['country_id']."' ";
        $result_state = mysqli_query($con,$select_state);
?>
    <option value="">Select State</option>
<?php
    foreach($result_state as $state) {
?>
    <option value="<?php echo $state["state_id"]; ?>"><?php echo $state["state_name"]; ?></option>
<?php
        }
    }

    elseif($_REQUEST['action']=="ins_std") 
    {
        $country = mysqli_real_escape_string($con,$_POST['country']);
        $state = mysqli_real_escape_string($con,$_POST['state']);
        $insert_std = "INSERT into student (s_id,c_id) values ('".$state."','".$country."')";
        $res_std=mysqli_query($con,$insert_std);
        if($res_std){
            echo json_encode("yes");
        }else{
            echo json_encode("fail");
        }
    }
?>

enter image description here

关于php - 如何在 php bootstrap 模式中使用依赖下拉列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49585017/

26 4 0
文章推荐： mysql - 我可以在 mysql 的 performance_schema 中添加索引吗
文章推荐： java - 自定义 Android LocationListener 问题
文章推荐： C# - 如何自定义 OpenFileDialog 以选择多个文件夹和文件？
文章推荐： android - 如何使用 onTouchListener 拖放 body 并仍在 PhysicsWorld 中？和引擎
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com