2 hộp nhập tự động điền / gợi ý sử dụng jQuery hoặc Ajax với hộp thứ hai dựa trên các lựa chọn đầu tiên với nhiều mục

Đây là một thủ tục rất đơn giản. Tôi sẽ chỉ hiển thị khung xương chính. Việc thêm thịt nướng sẽ do bạn thực hiện.

Giả sử chúng ta có hai <select> trong ajax.php như thế này:

   <select id="parent">
        <option value="1">value1</option>
        <option value="2">value2</option>
        <option value="3">value3</option>
        <option value="4">value4</option>
    </select>

    <select id="child">

    </select>

Vậy chúng ta cần gì? Chúng ta cần điền <select> thứ 2 trong trường hợp được lựa chọn.

Đây là phần javascript (ajax.php)

<script type="text/javascript">
            $(function(){                    
                $('#parent').change(function(){ //on change event
                var parentVal = $('#parent').val(); //<----- get the value from the parent select
                $.ajax({
                    url     : 'process.php', //the url you are sending datas to which will again send the result
                    type    : 'GET', //type of request, GET or POST
                    data    : { parentValue: parentVal}, //Data you are sending
                    success : function(data){$('#child').html(data)}, // On success, it will populate the 2nd select
                    error   : function(){alert('an error has occured')} //error message
                })
            })

            })
    </script>

Thao tác này sẽ gửi yêu cầu đến process.php

Bây giờ đến với process.php

Ở đây, chúng tôi cần dữ liệu để điền <select> thứ 2

Bây giờ những gì bên trong <select> ?

<option value="someValue">someText</option>

Bạn cần xuất một cái gì đó như thế này:

    <option value="11">value11</option>
    <option value="12">value12</option>
    <option value="13">value13</option>
    <option value="14">value14</option>

Giá trị và văn bản bên trong đáp ứng nhu cầu của bạn.

Vì nó sẽ đến từ datanbase:

• Bạn có thể lấy giá trị chọn gốc trong process.php với $_GET['parentValue']
• Với giá trị đó, hãy truy vấn cơ sở dữ liệu
• Sau đó, từ kết quả trả về từ cơ sở dữ liệu, hãy sử dụng vòng lặp while , foreach hoặc for (tùy thuộc vào cách bạn đang truy xuất nó), hãy tạo <option value="someValue">someText</option> .
• bạn đã hoàn tất!

Đối với nhiều lựa chọn

để làm cho cuộc sống dễ dàng hơn một chút, bạn có thể sử dụng nhiều lựa chọn đã chọn

Một lời khuyên

mysql_* không được dùng nữa. sử dụng PDO để thay thế. Đây là liên kết tới một hướng dẫn