Giải pháp Javascript để ẩn tùy chọn danh sách thả xuống

Question

Chỉnh sửa: Cảm ơn mọi người, nhưng dường như không có gì hiệu quả. Tôi chèn mã này vào một tập tin mà tôi biết đang được sử dụng và có chứa các khối javascript khác thường được định dạng, và điều này vẫn không hoạt động. Nó hoạt động trong một fiddle, nhưng không phải trên mã của tôi. Tôi đoán điều này quá cụ thể đối với nền tảng và tiện ích mà tôi đang cố sửa đổi (đây là một phần của bước thanh toán Magento được sửa đổi bởi tiện ích của bên thứ ba). Tôi sẽ bắt đầu xem xét việc thay thế danh sách bằng danh sách được tạo theo cách thủ công. Cảm ơn một lần nữa.

---

Tôi đang cố gắng ẩn tùy chọn trong danh sách thả xuống được tạo theo thực tế. Giải pháp CSS không hoạt động trên tất cả các trình duyệt và mặc dù tôi đã tìm thấy một số câu hỏi tương tự ở đây, nhưng cũng không có giải pháp nào phù hợp với tôi.

Đây là những gì tôi làm cho danh sách như:

<select id="timeselect" name="adj[delivery_time][]" title="El plazo de la entrega" class="adjtimeselect select" type="time" ><option id="option-10" value="10" >10</option> 
<option id="option-11" value="11" >11</option> 
<option id="option-12" value="12" >12</option> 
<option id="option-13" value="13" >13</option> 
<option id="option-14" value="14" >14</option> 
<option id="option-15" value="15" >15</option> 
<option id="option-16" value="16" >16</option> 
<option id="option-17" value="17" >17</option> 
<option id="option-18" value="18" >18</option> 
<option id="option-19" value="19" >19</option> 
<option id="option-20" value="20" >20</option> 
</select> 

tôi cần phải che giấu sự lựa chọn với giá trị "12" chẳng hạn. Tôi đang sử dụng JS này:

$("#timeselect option[value='12']").remove(); 

Bất kỳ lời khuyên nào sẽ được đánh giá cao vì tôi mới tham gia JS.

Cảm ơn.

Answer 1

Jquery loại bỏ bởi giá trị

$("#timeselect option[value=11]").remove(); 

Jquery loại bỏ bởi chữ

$("#timeselect option:contains(11)").remove(); 

Jquery để ẩn một tùy chọn hộp chọn với giá trị của nó sử dụng css

$("#timeselect option[value='11']").hide(); 

hoặc

$("#timeselect option[value='11']").css('display','none'); 

Answer 2

Sử dụng các chức năng của hide() JQuery: jsFiddle

Bạn có thể sử dụng show() để lấy lại

Answer 3

Bạn có thể sử dụng jQuery loại bỏ) chức năng (.nếu bạn muốn loại bỏ nó vĩnh viễn khỏi DOM, hoặc nếu bạn muốn loại bỏ và lắp nó sử dụng cửa sổ mới()

$("#timeselect option[value='12']").remove(); 

Hoặc Detach

var value = $("#timeselect option[value='12']").detach(); 

Và lắp nó bằng cách sử dụng

$("#timeselect").append(value); 

http://jsbin.com/iHIrAQE/5/edit

Xem ví dụ

Một cách khác là bạn có thể vô hiệu hóa các giá trị để người dùng có thể nhìn thấy nhưng không thể chọn

$("#timeselect option[value='12']").attr('disabled','disabled'); 

Answer 4

tôi đã cố gắng bằng nhiều cách khác nhau nhưng giải pháp này có vẻ hợp lý và trình duyệt chéo tương thích và tôi đã sử dụng trong mã của tôi. Không có plugin cần thiết chức năng đăng ký đơn giản với đối tượng jquery

Giải pháp ở cái nhìn:

(function ($) { 


$('#showOne').click(function() { 
    $('#ddlNumbers').showHideDropdownOptions('3', true); 
}); 

$('#hideOne').click(function() { 
    $('#ddlNumbers').showHideDropdownOptions('3', false); 
}); 

$.fn.showHideDropdownOptions = function(value, canShowOption) { 

     $(this).find('option[value="' + value + '"]').map(function() { 
      return $(this).parent('span').length === 0 ? this : null; 
     }).wrap('<span>').hide(); 

     if (canShowOption) 
      $(this).find('option[value="' + value + '"]').unwrap().show(); 
     else 
      $(this).find('option[value="' + value + '"]').hide(); 

} 



})(jQuery); 

Đây là việc thực hiện hoàn chỉnh http://jsfiddle.net/8uxD7/3/