Làm cách nào để tạo tùy chọn chọn động trong php?

Question

Nội dung chính Show

Mã nguồn
cơ sở dữ liệu
mục lục. php
tải dữ liệu. php
Làm cách nào để tạo danh sách thả xuống động trong PHP?
Làm cách nào để tạo danh sách thả xuống động trong Ajax?
Làm cách nào để hiển thị giá trị tùy chọn đã chọn trong PHP từ cơ sở dữ liệu?
Bạn sẽ xử lý HTML động với Ajax như thế nào?

Với bài đăng này, chúng tôi đã đến với chủ đề độc đáo như Làm cách nào chúng tôi có thể tạo hộp Chọn phụ thuộc động với tùy chọn Tìm kiếm bằng tập lệnh PHP bằng jQuery và Ajax. Chúng tôi đã xem nhiều hướng dẫn về hộp danh sách tải xuống phụ thuộc động đơn giản với tập lệnh PHP sử dụng ajax. Vì vậy, trong hộp chọn động đơn giản, đối với tùy chọn chọn, chúng tôi phải cuộn hộp chọn để chọn tùy chọn cụ thể và sau khi chọn tùy chọn cụ thể, thì hộp chọn khác có dữ liệu phụ thuộc vào giá trị mà chúng tôi đã chọn hộp chọn chính. Nhưng trong Hộp chọn phụ thuộc động với tùy chọn tìm kiếm, người dùng không cuộn hộp chọn mà họ phải nhập giá trị vào hộp tìm kiếm mà họ muốn chọn từ hộp chọn và hộp chọn phụ thuộc khác sẽ được điền dữ liệu và từ hộp chọn đó . Vì vậy, đây là lợi ích chính của hộp chọn phụ thuộc động với tùy chọn tìm kiếm

Để tạo hộp chọn phụ thuộc động với tùy chọn tìm kiếm, ở đây chúng tôi đã sử dụng plugin Bootstrap Select. Plugin chọn Bootstrap là một plugin jquery và bằng cách sử dụng plugin này, chúng tôi có thể tạo hộp chọn và menu bằng cách sử dụng thư viện Bootstrap và plugin này sẽ thêm tính năng bổ sung như tìm kiếm trực tiếp, nhiều lựa chọn tùy chọn, tùy chỉnh kiểu hộp chọn và chọn hoặc bỏ chọn tất cả tùy chọn . Nếu bạn đã sử dụng thư viện Bootstrap trong quá trình phát triển web của mình thì bạn có thể dễ dàng sử dụng plugin này để tạo hộp chọn phụ thuộc động với tùy chọn tìm kiếm

Sau khi chuyển đổi hộp chọn đơn giản thành hộp chọn có thể tìm kiếm bằng cách sử dụng plugin chọn Bootstrap. Bây giờ để chuyển đổi hộp chọn có thể tìm kiếm đó thành hộp chọn động. Vì vậy, ở đây chúng tôi sẽ sử dụng tập lệnh PHP để điền dữ liệu động vào hộp chọn có thể tìm kiếm này. Sau này, chúng tôi muốn tạo hộp chọn có thể tìm kiếm phụ thuộc động, vì điều này ở đây chúng tôi đã sử dụng Ajax. Vì vậy, bằng cách sử dụng hộp chọn con Ajax sẽ chứa đầy dữ liệu sau khi chọn giá trị từ hộp chọn cha. Dưới đây, bạn có thể tìm thấy mã nguồn hoàn chỉnh về cách tạo hộp chọn phụ thuộc động với tùy chọn tìm kiếm trong PHP bằng cách sử dụng jQuery và Ajax

Mã nguồn

cơ sở dữ liệu


--
-- Table structure for table `tbl_industry`
--

CREATE TABLE `tbl_industry` (
  `industry_id` int(11) NOT NULL,
  `industry_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

-- --------------------------------------------------------

--
-- Table structure for table `tbl_sub_industry`
--

CREATE TABLE `tbl_sub_industry` (
  `sub_industry_id` int(11) NOT NULL,
  `industry_id` int(11) NOT NULL,
  `sub_industry_name` varchar(250) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_industry`
--
ALTER TABLE `tbl_industry`
  ADD PRIMARY KEY (`industry_id`);

--
-- Indexes for table `tbl_sub_industry`
--
ALTER TABLE `tbl_sub_industry`
  ADD PRIMARY KEY (`sub_industry_id`),
  ADD KEY `industry_id` (`industry_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_industry`
--
ALTER TABLE `tbl_industry`
  MODIFY `industry_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=78;

--
-- AUTO_INCREMENT for table `tbl_sub_industry`
--
ALTER TABLE `tbl_sub_industry`
  MODIFY `sub_industry_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4414;

Xem bản trình diễn

mục lục. php


<!DOCTYPE html>
<html>
  <head>
    <title>Dynamic Dependent Searchable Select Box with PHP Ajax jQuery</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
  </head>
  <body>
    <br />
    <div class="container">
      <h3 align="center">Dynamic Dependent Searchable Select Box with PHP Ajax jQuery</h3>
      <br />
      <div class="panel panel-default">
        <div class="panel-heading">Select Data</div>
        <div class="panel-body">
          <div class="form-group">
            <label>Select Category</label>
            <select name="category_item" id="category_item" class="form-control input-lg" data-live-search="true" title="Select Category">

            </select>
          </div>
          <div class="form-group">
            <label>Select Sub Category</label>
            <select name="sub_category_item" id="sub_category_item" class="form-control input-lg" data-live-search="true" title="Select Sub Category">

            </select>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

<script>
$(document).ready(function(){

  $('#category_item').selectpicker();

  $('#sub_category_item').selectpicker();

  load_data('category_data');

  function load_data(type, category_id = '')
  {
    $.ajax({
      url:"load_data.php",
      method:"POST",
      data:{type:type, category_id:category_id},
      dataType:"json",
      success:function(data)
      {
        var html = '';
        for(var count = 0; count < data.length; count++)
        {
          html += '<option value="'+data[count].id+'">'+data[count].name+'</option>';
        }
        if(type == 'category_data')
        {
          $('#category_item').html(html);
          $('#category_item').selectpicker('refresh');
        }
        else
        {
          $('#sub_category_item').html(html);
          $('#sub_category_item').selectpicker('refresh');
        }
      }
    })
  }

  $(document).on('change', '#category_item', function(){
    var category_id = $('#category_item').val();
    load_data('sub_category_data', category_id);
  });
  
});
</script>

tải dữ liệu. php


<?php

$connect = new PDO("mysql:host=localhost;dbname=testing", "root", "");

if(isset($_POST["type"]))
{
 if($_POST["type"] == "category_data")
 {
  $query = "
  SELECT * FROM tbl_industry 
  ORDER BY industry_name ASC
  ";
  $statement = $connect->prepare($query);
  $statement->execute();
  $data = $statement->fetchAll();
  foreach($data as $row)
  {
   $output[] = array(
    'id'  => $row["industry_id"],
    'name'  => $row["industry_name"]
   );
  }
  echo json_encode($output);
 }
 else
 {
  $query = "
  SELECT * FROM tbl_sub_industry 
  WHERE industry_id = '".$_POST["category_id"]."' 
  ORDER BY sub_industry_name ASC
  ";
  $statement = $connect->prepare($query);
  $statement->execute();
  $data = $statement->fetchAll();
  foreach($data as $row)
  {
   $output[] = array(
    'id'  => $row["sub_industry_id"],
    'name'  => $row["sub_industry_name"]
   );
  }
  echo json_encode($output);
 }
}

?>