jQuery usunąć wybrać opcje w oparciu o inny SELECT wybrany (potrzeba wsparcia dla wszystkich przeglądarek)

Question

Say mam ten rozwijaną:

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

chcę go tak, że gdy użytkownik wybierze 1, to jest rzeczą, że użytkownik można wybrać na liście rozwijanej 2:

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

Lub jeśli użytkownik wybierze 2:

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

lub jeśli Sele użytkownika CTS 3:

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

Próbowałem kod zamieszczone tutaj: jQuery disable SELECT options based on Radio selected (Need support for all browsers)

Ale to nie zadziała wybiera.

Proszę pomóc! Dziękujemy!

UPDATE: bardzo podoba mi się odpowiedź Paolo Bergantino miał on: jQuery disable SELECT options based on Radio selected (Need support for all browsers)

Czy mimo zmodyfikować to do pracy z wybiera zamiast przycisków radiowych?

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) 
        ); 
       } 
      }); 
     });    
    }); 
}; 

Answer 1

to działa (testowane w 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; 
     } 
    }); 
}); 

i pięknej Ui:

<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> 

Answer 2

Aby uzyskać rekord, należy wpisać can NOT remove options na liście wyboru w programie Internet Explorer.

Answer 3

Możesz dodać klas do <option> s do oznaczania przejść z każdej wartości #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> 

następnie to zrobić:

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

Answer 4

Faktycznie, przy użyciu kodu poniżej usunie opcję rozwijaną dobrze w IE, tak długo jak nie jest wybrana opcja (to nie będzie działać na „a” bez odznaczając tę ​​opcję pierwszą):

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

wystarczy uruchomić to usunąć cokolwiek opcja chcesz usunąć ramach warunkowego oświadczenia z pierwszej grupy (theOptions1) - że jeśli wybrano jedną z tych, uruchomić te linie:

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

Answer 5

Spróbuj tego. to na pewno działa

 $(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>