Điền một danh sách thả xuống dựa trên việc chọn danh sách thả xuống khác

Question

Tôi muốn tạo hai danh sách thả xuống, danh mục và mục.

Nếu tôi chọn một trong các danh mục có tên là ô tô, thì danh sách thả xuống mục sẽ có Honda, Volvo, Nissan.

Nếu tôi chọn một trong các danh mục có tên điện thoại, thì danh sách thả xuống mục sẽ có iPhone, Samsung, Nokia này.

Tôi làm cách nào để thực hiện việc này? Tôi biết rằng tôi không thể làm điều đó với HTML thuần túy.

Answer 1

LÀM VIỆC DEMO http://jsfiddle.net/kasperfish/r7MN9/3/ (với jquery)

cars=new Array("Mercedes","Volvo","BMW","porche"); 
phones=new Array('Samsung','Nokia','Iphone'); 

populateSelect(); 

$(function() { 

     $('#cat').change(function(){ 
     populateSelect(); 
    }); 

}); 


function populateSelect(){ 
    cat=$('#cat').val(); 
    $('#item').html(''); 


    if(cat=='car'){ 
     cars.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

    if(cat=='phone'){ 
     phones.forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

} 

CẬP NHẬT: sử dụng eval() để có thể thêm càng nhiều mảng như bạn muốn. JSFIDDLE DEMO

cars=new Array("Mercedes","Volvo","BMW","porche"); 
phones=new Array('Samsung','Nokia','Iphone'); 
names=new Array('Kasper','Elke','Fred','Bobby','Frits'); 
colors=new Array('blue','green','yellow'); 

populateSelect(); 

$(function() { 

     $('#cat').change(function(){ 
     populateSelect(); 
    }); 

}); 


function populateSelect(){ 
    cat=$('#cat').val(); 
    $('#item').html(''); 

     eval(cat).forEach(function(t) { 
      $('#item').append('<option>'+t+'</option>'); 
     }); 
    } 

Answer 2

Có nhiều cách để bạn có thể thực hiện việc này tùy thuộc vào mục tiêu cuối cùng của bạn là gì. Dưới đây là 2 loại phổ biến nhất.

Đây là quá trình cơ bản:

1. Trang tải với menu thả xuống đầu dân cư với các tùy chọn, giả sử loại (xe hơi, xe tải, SUV) và thả xuống mục bị vô hiệu hóa.
2. tài chọn một giá trị từ trình đơn thả xuống đầu tiên, có một vài cách để xử lý này:

AJAX (các trải nghiệm liền mạch nhất với tải trang ít nhất):

1. Sử dụng Javascript gửi yêu cầu ajax đối với tập lệnh PHP (hoặc bất kỳ trình xử lý nào khác) chứa giá trị của tùy chọn đã chọn từ danh mục thả xuống dưới dạng tham số bài đăng hoặc yêu cầu.
2. Truy xuất giá trị cho mục thả xuống dựa trên danh mục của chúng tôi, có thể là từ cơ sở dữ liệu của chúng tôi, biến, tệp tĩnh hoặc bất kỳ phương tiện nào khác mà bạn có thể đến với số
3. theo yêu cầu AJAX (json, xml, plaintext, bất kỳ thứ gì phù hợp nhất với bạn và bạn cảm thấy thoải mái nhất)
4. Sử dụng Javascript (hoặc bạn có thể sử dụng thư viện như jQuery). thả xuống mục và bật nó để người dùng có thể thực hiện lựa chọn.
5. Từ đây, chúng tôi có thể tiếp tục sử dụng các yêu cầu và phản hồi AJAX hoặc POST biểu mẫu trả lại trang cuối cùng hoặc bất kỳ cách sử dụng cụ thể nào của bạn.

Nếu bạn không muốn sử dụng AJAX, bạn có thể dễ dàng POST biểu mẫu tới trình xử lý phía Máy chủ, nhận giá trị từ trình đơn thả xuống danh mục, xác định giá trị của bạn cho menu thả xuống và sau đó hiển thị phản hồi HTML của bạn, trong đó bạn đặt giá trị cho danh mục thả xuống và tắt nó (do đó người dùng sẽ phải sử dụng nút quay lại nếu họ muốn thay đổi danh mục) và điền thả xuống mục.