2009-08-14 30 views
12

Nói rằng tôi có thả xuống này:jQuery loại bỏ tùy chọn CHỌN dựa trên một chọn lựa chọn (Cần hỗ trợ cho tất cả các trình duyệt)

<select id="theOptions1"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

Tôi muốn nó để khi người sử dụng chọn 1, đây là điều mà người sử dụng có thể chọn cho thả xuống 2:

<select id="theOptions2"> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="c">c</option> 
</select> 

Hoặc nếu người sử dụng chọn 2:

<select id="theOptions2"> 
    <option value="a">a</option> 
    <option value="b">b</option> 
</select> 

Hoặc nếu Sele người dùng cts 3:

<select id="theOptions2"> 
    <option value="b">b</option> 
    <option value="c">c</option> 
</select> 

tôi đã cố gắng mã được đăng ở đây: jQuery disable SELECT options based on Radio selected (Need support for all browsers)

Nhưng nó không làm việc cho lựa chọn.

Vui lòng trợ giúp! Cảm ơn bạn!

UPDATE: Tôi thực sự thích câu trả lời Paolo Bergantino đã có trên: jQuery disable SELECT options based on Radio selected (Need support for all browsers)

Liệu có cách nào để sửa đổi này để làm việc với Selects thay vì nút radio?

jQuery.fn.filterOn = function(radio, values) { 
    return this.each(function() { 
     var select = this; 
     var options = []; 
     $(select).find('option').each(function() { 
      options.push({value: $(this).val(), text: $(this).text()}); 
     }); 
     $(select).data('options', options); 
     $(radio).click(function() { 
      var options = $(select).empty().data('options'); 
      var haystack = values[$(this).attr('id')]; 
      $.each(options, function(i) { 
       var option = options[i]; 
       if($.inArray(option.value, haystack) !== -1) { 
        $(select).append(
        $('<option>').text(option.text).val(option.value) 
        ); 
       } 
      }); 
     });    
    }); 
}; 

Trả lời

15

này làm việc (thử nghiệm trong Safari 4.0.1, FF 3.0.13):

$(document).ready(function() { 
    //copy the second select, so we can easily reset it 
    var selectClone = $('#theOptions2').clone(); 
    $('#theOptions1').change(function() { 
     var val = parseInt($(this).val()); 
     //reset the second select on each change 
     $('#theOptions2').html(selectClone.html()) 
     switch(val) { 
      //if 2 is selected remove C 
      case 2 : $('#theOptions2').find('option:contains(c)').remove();break; 
      //if 3 is selected remove A 
      case 3 : $('#theOptions2').find('option:contains(a)').remove();break; 
     } 
    }); 
}); 

Và giao diện người dùng đẹp:

<select id="theOptions1"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 
<br /> 
<select id="theOptions2"> 
    <option value="a">a</option> 
    <option value="b">b</option> 
    <option value="c">c</option> 
</select> 
+0

Tôi sẽ thử ngay bây giờ. Tôi thích cách bạn giữ giao diện người dùng khá – Oscar

+0

Ví dụ về việc bạn đã lưu cho tôi một ngày làm việc. Cảm ơn! –

1

Cho bản ghi bạn can NOT remove options trong danh sách chọn trong Internet Explorer.

+1

tôi nghĩ anh ấy có nghĩa là loại bỏ chứ không phải vô hiệu hóa. – karim79

+0

Ya xin lỗi, tôi có nghĩa là loại bỏ ... – Oscar

+0

Oh thân yêu Flying Spaghetti Monster! Đó là một trình rút gọn URL! – random

9

Bạn có thể thêm lớp để <option> của bạn để ghi nhận những đi với mỗi giá trị của #theOptions1:

<select id="theOptions2"> 
    <option value="a" class="option-1 option-2">a</option> 
    <option value="b" class="option-1 option-2 option-3">b</option> 
    <option value="c" class="option-1 option-3">c</option> 
</select> 

thì làm như sau:

$(function() { 
    var allOptions = $('#theOptions2 option').clone(); 
    $('#theOptions1').change(function() { 
     var val = $(this).val(); 
     $('#theOptions2').html(allOptions.filter('.option-' + val)); 
    }); 
}); 
+0

Tôi thích điều này tốt hơn. Chỉ cần chỉnh sửa nhỏ - nó phải là: $ ('# theOptions2'). Html (... –

+0

Khá trơn. Sửa đổi mã trình bày, nhưng tất cả trong tất cả, rất mở rộng. – Kzqai

0

Trên thực tế, sử dụng mã dưới đây sẽ loại bỏ một lựa chọn thả xuống ngay tốt trong IE, miễn là nó không phải là lựa chọn được lựa chọn (nó sẽ không hoạt động trên "a" mà không cần bỏ chọn tùy chọn đó đầu tiên):

var dropDownField = $('#theOptions2'); 
dropDownField.children('option:contains("b")').remove(); 

bạn chỉ cần chạy này để loại bỏ bất cứ điều gì tùy chọn mà bạn muốn loại bỏ dưới một tuyên bố có điều kiện với nhóm đầu tiên (theOptions1) - rằng nếu một trong những người được chọn, bạn chạy những dòng này:

var dropDownField = $('#theOptions2'); 
if ($('#theOptions1').val() == "2") { 
    dropDownField.children('option:contains("c")').remove(); 
} 
if ($('#theOptions1').val() == "3") { 
    $("#theOptions2 :selected").removeAttr("selected"); 
    $('#theOptions2').val('b'); 
    dropDownField.children('option:contains("a")').remove(); 
} 

- Tom

0

hãy thử điều này. điều này chắc chắn sẽ làm việc

 $(document).ready(function() { 
 

 
    var oldValue; 
 
    var oldText; 
 
    var className = '.ddl'; 
 

 
    $(className) 
 
       .focus(function() { 
 
        oldValue = this.value; 
 
        oldText = $(this).find('option:selected').text(); 
 
       }) 
 
       .change(function() { 
 
        var newSelectedValue = $(this).val(); 
 
        if (newSelectedValue != "") { 
 
         $('.ddl').not(this).find('option[value="' + newSelectedValue + '"]').remove(); 
 
        } 
 
        if ($(className).not(this).find('option[value="' + oldValue + '"]').length == 0) { // NOT EXIST 
 
         $(className).not(this).append('<option value=' + oldValue + '>' + oldText + '</option>'); 
 
        } 
 
        $(this).blur(); 
 
       }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<form action="/Home/Ex2" method="post"> 
 
    <select class="ddl" id="A1" name="A1"> 
 
     <option value="">Select</option> 
 
     <option value="1">A</option> 
 
     <option value="2">B</option> 
 
     <option value="3">C</option> 
 
     <option value="4">D</option> 
 
    </select> 
 
    <hr /> 
 
    <select class="ddl" id="A2" name="A2"> 
 
     <option value="">Select</option> 
 
     <option value="1">A</option> 
 
     <option value="2">B</option> 
 
     <option value="3">C</option> 
 
     <option value="4">D</option> 
 
    </select> 
 
    <hr /> 
 
    <select class="ddl" id="A3" name="A3"> 
 
     <option value="">Select</option> 
 
     <option value="1">A</option> 
 
     <option value="2">B</option> 
 
     <option value="3">C</option> 
 
     <option value="4">D</option> 
 
    </select> 
 
    <hr /> 
 
    <select class="ddl" id="A4" name="A4"> 
 
     <option value="">Select</option> 
 
     <option value="1">A</option> 
 
     <option value="2">B</option> 
 
     <option value="3">C</option> 
 
     <option value="4">D</option> 
 
    </select> 
 
    <hr /> 
 
    <input type="submit" name="submit" value="Save Data" id="btnSubmit" /> 
 
</form>

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