Ẩn các tùy chọn trong phần tử đã chọn, không hoạt động trong IE?

Question

thể trùng lặp:
Hide select option in IE using jQuery

Như bạn có thể nhìn thấy dưới đây, tôi có hai lựa chọn các yếu tố. Giá trị đầu tiên có hai giá trị là 1,4 và 1,7. Tùy thuộc vào tùy chọn nào được chọn, tôi muốn vô hiệu hóa các tùy chọn nhất định trong phần tử chọn thứ hai. Nó hoạt động hoàn toàn tốt trong chrome, nhưng IE là một bitch (như thường lệ!).

Bất kỳ ý tưởng nào sai?

<p> 
    <label style="width: 155px; display: inline-block;">Height</label> 
    <select name="height"> 
     <option value="1.4">1.4</option> 
     <option value="1.7">1.7</option> 
    </select> 
</p> 
<p> 
    <label style="width: 155px; display: inline-block;">Amount</label> 
    <select name="slanor"> 
     <option class="four" value="2">2</option> 
     <option class="four seven" value="3">3</option> 
     <option class="seven" value="4">4</option> 
    </select> 
</p> 


<script> 
$(document).ready(function() { 
    check(); 

    $('select[name=height]').change(function() { 
     check(); 
    }); 

    function check() { 
     var slanor = $('select[name=slanor]'); 
     var currHeight = $('select[name=height]').val(); 

     if(currHeight == '1.4') { 
      slanor.find('option').hide(); 
      slanor.find('.four').show(); 
     } else { 
      slanor.find('option').hide(); 
      slanor.find('.seven').show(); 
     } 
    } 
}); 
</script> 

Answer 1

Khái niệm ẩnkhông tồn tại trong IE. Bạn sẽ phải tự xóa và thêm lại các mục nhập, điều này có thể hơi bất tiện.

Một giải pháp khác sẽ được cũng vô hiệu hóa các yếu tố:

slanor.find(option).hide().prop('disabled', true); 

này sẽ ẩn các tùy chọn trong tất cả các trình duyệt hỗ trợ nó, nhưng vô hiệu hóa nó trong IE, có nghĩa là nó vẫn sẽ có thể nhìn thấy, nhưng trực quan phân biệt với các tùy chọn khác và không thể chọn.

Tuy nhiên: nếu vấn đề của bạn là chính xác như bạn đã mô tả, và chỉ có hai tùy chọn mà kịch bản của bạn sẽ thay đổi trên, giải pháp đơn giản nhất có thể là để hide và show hai Dropdowns khác nhau hoàn toàn, tùy thuộc vào lựa chọn là đã chọn.

Answer 2

Gọi .hide() trong jQuery thêm hiển thị: none vào phần tử. Tôi nghi ngờ rằng đó là HTML chuẩn mà bạn có thể ẩn các tùy chọn theo cách này.

Bạn có thể sử dụng mã này để thay thế:

slanor.empty(); 
if (currHeight == '1.4') { 
    slanor.append($('<option'>).val('2').text('2')); 
    slanor.append($('<option'>).val('3').text('3')); 
} 
else { 
    slanor.append($('<option'>).val('3').text('3')); 
    slanor.append($('<option'>).val('4').text('4')); 
} 

Answer 3

Tùy chọn thẻ không hỗ trợ các thuộc tính hiển thị css. Đó là những gì hiển thị()/hide(). Đặt cược tốt nhất của bạn là xóa hoặc tạo lại các tùy chọn khi cần. Hoặc tôi đoán bạn có thể thêm chúng vào một đối tượng ẩn khác và kéo chúng trở lại khi bạn cần chúng hoàn toàn được tạo thành.

Vì vậy, bạn sẽ có một cái gì đó giống như

$("option").appendTo($("#myhiddenselect")); 
$(".four").appendTo($("#myvisibleselect"));