Cách điền trình đơn thả xuống đáng tin cậy bằng cách sử dụng Ajax và php

Question

Xin chào, tôi muốn quản lý dữ liệu trên menu thả xuống bằng cách sử dụng Ajax.

databse Fields:

1.id

2.name

3.department

myDesgin.php

 <select id="id"></select> 
    <select id="name"></select> 
    <select id="department"></select> 

1. Nếu tôi chọn một trình đơn thả xuống muốn thay đổi một trình đơn thả xuống khác phụ thuộc vào giá trị đã chọn bằng cách sử dụng Ajax.

2. Có mã nào không, nếu tôi chọn một trình đơn thả xuống, hãy chuyển đến cửa sổ con khác và hiển thị dữ liệu ở định dạng bảng (như báo cáo) sử dụng Ajax.

Cảm ơn trước.

Vui lòng cho tôi mã ví dụ, vì tôi là người mới bắt đầu đến ajax, chào đón nhiều nhất nếu ai đó cung cấp giải thích bằng mã (cho ajax).

Answer 1

Có, hãy kiểm tra mã jquery ajax sau đây. Trong ví dụ này, nếu bạn thay đổi "Bộ" thì nó sẽ điền danh sách thả xuống "Tên".

$(document).on("change", '#department', function(e) { 
 
      var department = $(this).val(); 
 
      
 

 
      $.ajax({ 
 
       type: "POST", 
 
       data: {department: department}, 
 
       url: 'admin/users/get_name_list.php', 
 
       dataType: 'json', 
 
       success: function(json) { 
 

 
        var $el = $("#name"); 
 
        $el.empty(); // remove old options 
 
        $el.append($("<option></option>") 
 
          .attr("value", '').text('Please Select')); 
 
        $.each(json, function(value, key) { 
 
         $el.append($("<option></option>") 
 
           .attr("value", value).text(key)); 
 
        }); \t \t \t \t \t \t \t \t \t \t \t \t \t \t 
 
\t     
 

 
        
 
        
 
       } 
 
      }); 
 

 
     });

Answer 2

Mặc dù có nhiều mã sẵn có. Tôi đang viết mã dễ dàng và cơ bản nhất cho bạn.

HTML

<select id="id" onchange="update_name(this.id)"></select> 

AJAX Mã

function update_name(id) 
{ 

    var xmlhttp=new XMLHttpRequest(); 
    xmlhttp.onreadystatechange=function() 
{ 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("txt").innerHTML=xmlhttp.responseText; 
    } 
} 
    xmlhttp.open("GET","update_data.php?q="+id,true); 
    xmlhttp.send(); 
} 

update_data.php (mã PHP)

<?php 
    if(isset($_GET['q']) 
    { 
      $id= $_GET['q']; 
      //based on id run your query 
    } 

Answer 3

select1 nhất định và Select2 như thế này:

<select id="select1"> 
    <option id="11" value="x">X</option> 
    <option id="12" value="y">Y</option> 
</select> 
<select id="select2"> 
    <option id="21" value="1">1</option> 
    <option id="22" value="2">2</option> 
</select> 

sau đó bạn có thể làm một cái gì đó như thế này với jQuery:

$('#select1').on('change', function() { 
    $.ajax({ 
     url: "test.html", 
    }).done(function(response) { 
     $('#select2').html(response); 
}); 

này giả định trở về cuộc gọi ajax của bạn một chuỗi như

<option id="21" value="3">3</option><option id="22" value="4">4</option> 

từ tệp mặt máy chủ của bạn. Nếu bạn trả về một json, bạn phải giải mã nó trước, nhưng đây là ý chính của nó.Hãy nhìn vào các jQuery ajax() chức năng

Answer 4

Tôi đoán bạn có thể làm điều này:

làm cho một chức năng toàn cầu mà chấp nhận hai args, currElem, nextElem và dataObj:

function dynoDropdowns(currElem, nxtElem, dataObj){ 
    $.ajax({ 
     url:"path/to/file", 
     type:"post", 
     data:dataObj, 
     dataType:"json", // <-------------expecting json from php 
     success:function(data){ 
      $(nxtElem).empty(); // empty the field first here. 
      $.each(data, function(i, obj){ 
       $('<option />', 
       { 
        value:obj.value, 
        text:obj.text 
       } 
       ).appendTo(nxtElem); 
      }); 
     }, 
     error:function(err){ 
      console.log(err); 
     } 
    }); 
} 

tại các sự kiện thay đổi của bạn là:

$(function(){ 
    $('select').on('change', function(e){ 
     if(this.id === "id"){ 
      var dataObj = {id:this.value}; 
      dynoDropdowns(this, '#name', dataObj); 
     }else if(this.id === "name"){ 
      var dataObj = {name:this.value}; 
      dynoDropdowns(this, '#department', dataObj); 
     } 
    }); 
});