Ändern Sie andere Auswahlfeldoptionen in einem Auswahlfeld change- jQuery

Question

Ich implementiere Sicherheitsfragen für mein Projekt während der Anmeldung.

Zum Beispiel habe ich 4 Fragen und 4 <select> Boxen um jede Frage zu wählen

1. Was ist mittlerer Name Ihres Vaters?
2. Wie lautet der Vorname Ihres ersten Managers?
3. In welcher Stadt wurde dein Vater geboren?
4. Wie lautet der Name Ihres Haustiers?

Zu Beginn sind alle <select> Boxen sind alle vier Fragen bevölkerten

Nun, wenn der Benutzer vom 1. <select> Box 1. Frage wählt, sollte diese Frage weggelassen/von anderen <select> Boxen, dh die verbleibenden Fragen ausgeblendet werden (ausgenommen 1.) soll für die 2. <select> Box

auch, wenn ich zurück zu meinem ersten Auswahlbox gehen und die Frage ändern, die <option> Änderungen sollten in anderem Text <select> Feld

widerspiegeln

Jetzt habe ich offensichtlich mehr als 4 Fragen in meinem Projekt, um sicherzustellen, dass Benutzer nicht ohne Optionen für die letzten <select> verlassen wird.

This is what I have tried so far. Aber es zu unerwünschten Ergebnissen

Answer 1

<select id='one'> 
    <option value='1'>1</option> 
    <option value='2'>2</option> 
</select> 

<select id='two'> 
</select> 

jQuery erstellt:

$(document).ready(function(){ 
    $('#one').change(function(){ 
    var op= "<option value='1'>1</option><option value='2'>2</option>"; 
    $('#two').html(op); 
    }); 
}); 

Answer 2

Sie haben alle Auswahlboxen zu berücksichtigen, wenn für ausgewählte Werte überprüft, habe ich noch eine Schleife hinzugefügt mit .each wie folgt:

var questions = 
[ 
    { 
     "text" : "What is your father's middle name?", 
     "value" : "1" 
    }, 
    { 
     "text" : "What is the first name of your first manager?", 
     "value" : "2" 
    }, 
    { 
     "text" : "In what city was your father born?", 
     "value" : "3" 
    }, 
    { 
     "text" : "What is the name of your pet?", 
     "value" : "4" 
    } 

]; 
    $(document).ready(function(){ 

     $('select').each(function(){ 
     var selectbox = $(this).empty(); 
      for(var i = 0, l = questions.length; i < l; i++){ 
      var question = questions[i]; 
       selectbox.append($('<option>', { 
        value: question.value, 
        text : question.text 
       })); 
      } 
     }); 

     $('select').change(function(){ 
     var selectid = this.id; 
     var value = $(this).val(); 
     $('select').each(function(){ 
      var seleid = $(this).attr('id'); 
      $("#"+seleid+" > option").each(function(){ 
       if(seleid !== selectid) 
       { 
     sel = $(this); 
     $("#"+seleid+" option[value="+this.value+"]").show(); 
     $('select').each(function(){ 
      sel.value === value 
      $("#"+seleid+" option[value="+this.value+"]").hide();  
     });           
       } 
      }); 
     }); 


    }) 

    }); 

Siehe Demo hier:http://jsfiddle.net/0vu7snhx/

Answer 3

Versuchen Sie diese Hoffnung, es wird funktionieren.

'$("#select1").change(function() { 
     if ($(this).data('options') == undefined) { 
      $(this).data('options', $('#select2 option').clone()); 
     } 
     var id = $(this).val(); 
     var options = $(this).data('options').filter('[value=' + id + ']'); 
     $('#select2').html(options); 
}); 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>' 



<select name="select1" id="select1"> 
    <option value="1">Fruit</option> 
    <option value="2">Animal</option> 
    <option value="3">Bird</option> 
    <option value="4">Car</option> 
</select> 

<select name="select2" id="select2"> 
    <option value="1">Banana</option> 
    <option value="1">Apple</option> 
    <option value="1">Orange</option> 
    <option value="2">Wolf</option> 
    <option value="2">Fox</option> 
    <option value="2">Bear</option> 
    <option value="3">Eagle</option> 
    <option value="3">Hawk</option> 
    <option value="4">BWM<option> 
</select>