Cách tạo Hộp danh sách trống và chuyển các tùy chọn mà không chọn chúng?

Question

Ở dạng của tôi, tôi đang di chuyển loại từ một ListBox để khác như thế này:

Hộp đáy là "đầu vào" hộp được đọc trên phía máy chủ khi biểu mẫu được đăng. Đây là cách tôi tạo ListBox:

<%: Html.ListBoxFor(m => m.categories, Model.categories)%> 

Tôi đang gặp hai vấn đề ở đây:

1. Trong Firefox, khi biểu mẫu được nạp cho lần đầu tiên vào ô phía dưới luôn có một mặc định <option></option>. Có thể loại bỏ điều này ở phía máy chủ không? IE dường như tạo một hộp trống nhưng không tạo FF.
   Để giải quyết vấn đề này, tôi sẽ xóa tùy chọn trống trên tải trang. Một vấn đề với điều này là khi một biểu mẫu có lỗi và không được gửi, các tùy chọn sẽ bị xóa một lần nữa.

2. Để các tùy chọn trong hộp dưới cùng được đăng, chúng phải được chọn. Để giải quyết vấn đề này, tôi đã sử dụng jQuery bên dưới để chọn các tùy chọn trên bài đăng biểu mẫu.

---

jQuery để chọn tùy chọn trên trình:

$("form").submit(function (event) { 
    $("#categories").find("option").attr('selected', 'selected'); 
}); 

jQuery để xóa tùy chọn trên tải:

$("#categories").find("option").remove(); 

CÂU HỎI
1. Tôi có thể tạo ra một sản phẩm nào hộp danh sách hoạt động trong tất cả các trình duyệt?
2. Tôi có phải chọn các tùy chọn trong ô dưới cùng hoặc có cách giải quyết khác không?

Làm rõ: Tôi muốn có nhiều nhất có thể được thực hiện trên phía máy chủ, tốt nhất là với một cái gì đó liên quan đến MVC.

Answer 1

1: Thay vì xóa tất cả các tùy chọn, chỉ xóa các tùy chọn trống, cách này sẽ không được đặt lại.

$('#mySelect option').each(function() { 
    if(!$(this).val()) 
     $(this).remove(); 
}); 

http://jsfiddle.net/yWHLW/5/

Answer 2

1. http://jsfiddle.net/wVWGm/ kiểm tra tính tương thích của trình duyệt cho hộp danh sách trống.

$("form").submit(function (event) { 
    $("#categories").find("option:selected"); 
}); 

Answer 3

Firefox có tính đặc thù đó mà đòi hỏi nó để tạo ra các yếu tố trống để thực sự hiển thị các yếu tố lựa chọn. Tôi sợ bạn sẽ không thể làm việc xung quanh điều đó. Tuy nhiên, cách giải quyết tiềm năng cho # 2 có thể loại bỏ mối quan ngại của bạn về # 1.

Nếu bạn xây dựng trình xử lý sự kiện nhấp chuột trên nút thêm và xóa của bạn để tạo và hủy các đầu vào bị ẩn với cùng thuộc tính tên cho mọi giá trị được di chuyển trực quan giữa các hộp, chúng sẽ đến dưới dạng chuỗi CSV trong thành viên thích hợp bộ sưu tập Request.Form, có thể được chuyển thành một mảng giá trị bằng cách gọi:

Request.Form("myHiddenInputName").Split({","c}) 

Hoặc mã C# tương đương. Bạn sẽ không cần phải chọn các yếu tố trên trình và bạn sẽ không cần phải lo lắng về việc loại bỏ giá trị rỗng mà Firefox tạo ra ở phía máy chủ. Tất nhiên...đây có thể không phải là giải pháp hấp dẫn nhất trong kiến ​​trúc MVC, nhưng đó là phản hồi đầu tiên của tôi vì vậy tôi nghĩ tôi sẽ chia sẻ.

Answer 4

Tại sao bạn không tạo ra các hộp danh sách sử dụng HTML đơn giản; thay vì sử dụng người trợ giúp

<select style="width: 370px;" class="cmbBox1" id="ServicesList" 
multiple="multiple" name="ServicesList" size="8"></select>