2008-12-18 68 views
6

Tôi có một hộp danh sách trên biểu mẫu HTML có nút Gửi. Hộp danh sách có nhiều lựa chọn được bật. Tôi có thể chọn nhiều giá trị trong hộp danh sách, nhưng tôi không biết cách tìm ra giá trị nào được chọn khi biểu mẫu được gửi. Ngoài ra, tôi đang thêm giá trị do người dùng tạo vào hộp danh sách động bằng JavaScript và tôi muốn có thể nói hai điều khi biểu mẫu gửi:Cách đăng các lựa chọn của một Hộp danh sách HTML với nhiều giá trị được chọn

  1. Tùy chọn nào được thêm vào hộp bởi người dùng?
  2. Giá trị nào được người dùng chọn trong hộp?

Điều này có khả thi không? Cảm ơn.

+2

có thể ... nhưng bạn đang sử dụng ngôn ngữ phía máy chủ nào? có vẻ như phần lớn câu hỏi của bạn là về .. – Jack

Trả lời

4

Dưới đây bạn tìm thấy ví dụ về trang.

Lưu ý rằng:

  • select phần tử (và bất kỳ yếu tố hình thức) cần một tên để được bao gồm trong bài viết.
  • chỉ các tùy chọn đã chọn trong phần tử đã chọn mới được đăng.

Giá trị nào được người dùng chọn trong hộp?

Khi người dùng gửi biểu mẫu chỉ các giá trị đã chọn sẽ được gửi đến máy chủ. Tùy thuộc vào ngôn ngữ bạn đang sử dụng tại máy chủ có nhiều cách khác nhau để truy cập chúng.

Các tùy chọn được thêm vào hộp bởi người dùng là gì?

Như đã nêu trước đây, bạn chỉ thấy các tùy chọn đã được chọn. Nhưng làm thế nào để bạn phân biệt giữa các tùy chọn của bạn và các tùy chọn người dùng? Điều đó phụ thuộc vào dữ liệu bạn đang gửi cho người dùng. Câu trả lời phổ quát là thats giá trị bạn nhận được trở lại mà bạn đã không gửi. Tuy nhiên, điều này có thể được đơn giản hóa tùy thuộc vào dữ liệu của bạn. Vì các tùy chọn có cả giá trị và thuộc tính văn bản, một cách để sử dụng giá trị số cho các giá trị được tạo trước của bạn. Bằng cách đó, giá trị của bạn sẽ là số trong trả lời và giá trị của người dùng sẽ là chuỗi văn bản. Cách tiếp cận này giả định rằng người dùng của bạn sẽ không chỉ nhập một giá trị số. Một cách khác là để thêm một tiền tố cho tất cả người dùng tạo ra các giá trị (nhớ bạn có cả một giá trị và một trường văn bản cho tất cả các tùy chọn)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>Test of select box</title> 
    <script type="text/javascript"> 
     function addOpt(e) { 
     var o=document.createElement("option"); 
     //o.value= -e.options.length; 
     o.text = "Test " + e.options.length; 
     o.selected=true; 
     e.add(o,null); 
     } 
    </script> 
    </head> 
    <body> 
    <form method="post" action="mypage.html"> 
     <input type="button" onclick="addOpt(this.form.myselect)" value="Add option"/> 
     <br/> 
     <select id="myselect" name="mydata" multiple="multiple" size="10"> 
     <option value="0">Test 0</option> 
     <option value="1">Test 1</option> 
     <option value="2">Test 2</option> 
     </select> 
     <br/> 
     <input type="submit"/> 
    </form> 
    </body> 
</html> 
+2

có thể và có thể nên được thực hiện mà không cần javascript bằng cách sử dụng [] – aleemb

+0

@aleemb: Cách thêm câu trả lời [] "Các tùy chọn được thêm vào hộp bởi người dùng" và "Giá trị nào được người dùng chọn trong hộp"? Nếu bạn thực sự xem xét javascript ở trên, nó chỉ thêm các tùy chọn vào hộp chọn, chứng minh rằng văn bản sẽ được sử dụng làm giá trị. – some

36

Bằng cách đặt tên select của bạn với trailing dấu ngoặc vuông, PHP (và khả năng ngôn ngữ server khác) sẽ đưa các dữ liệu trong một mảng

ví dụ:

<form action="process.php" method="post"> 
    <select name="multiSelects[]" multiple="multiple" size="5"> 
    <option value="0">Zero</option> 
    <option value="1">One</option> 
    </select> 
    <input type="submit" /> 
</form> 

các lựa chọn sẽ có mặt trong mảng $_POST['multiSelects']

+1

hoạt động trong Node.js/Express.js – prototype

+0

Điều này chỉ hoạt động với PHP dưới dạng ngôn ngữ phía máy chủ – Ejaz

+1

@Ejay: Điều này sẽ hoạt động ở bất kỳ ngôn ngữ phía máy chủ nào tuân thủ tiêu chuẩn đáng giá, – Mrchief

Các vấn đề liên quan