erstmal allen ein frohes neues Jahr 2015 und die besten Wünsche für dieses.
Zu meinem Problem:
Ich habe ein Formular mit 8 selects, die alle (gleich) wie folgt gefüllt sind:
<select class="teamselect" name="selectedteams[]">
<option value="0">Bitte Team wählen</option>
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
<option value="4">Team 4</option>
<option value="5">Team 5</option>
<option value="6">Team 6</option>
<option value="7">Team 7</option>
<option value="8">Team 8</option>
</select>
Beim Ändern der Auswahl in einem der selects möchte ich erreichen, dass diese Option in den anderen selects nicht mehr aufgeführt wird.
Beim change-Ereignis in den selects schicke ich das Formular per ajax an eine php, in der dann ein json-Array mit den "übrigen Options" (Teams) zurückgegeben wird. Aus diesem Array "baue" ich die neuen Options für die selects neu zusammen, in denen noch nichts gewählt wurde, leere diese und fülle sie damit. Soweit funktioniert das für die selects, bei denen nichts gewählt wurde. Allerdings sollen auch in den selects mit gesetzter Option (value 1-8) alle weiteren gesetzten Options nicht mehr aufgeführt werden. Das funktioniert aber leider nicht, die geänderten Options werden nur bei den selects eingefügt, bei denen noch nichts gewählt wurde (value=0).
Hier mal der js-Teil:
var form_teamselect = $('#teamselectform');
var newOptionhtml;
$('.teamselect').on('change', function(e) {
e.preventDefault();
$.ajax({
url : 'index.php?tippspiel-selectteams',
type : 'POST',
dataType : 'json',
data : form_teamselect.serialize(),
success : function(response) {
if (response.success) {
newOptionhtml = '<option value="0">Team wählen</option>';
$.each(response.sel_teams, function(index, value) {
newOptionhtml += '<option value="'+index+'">'+value+'</option>';
});
$.each($('.teamselect'), function() {
if ($(this).val() == 0) {
$(this).empty().append(newOptionhtml);
}
});
}
}
});
});
Wie müßte der Code-Teil aussehen für
if ($(this).val() != 0) {, damit auch hier die bereits gewählten Options nicht mehr auftauchen?
Danke für die Hilfe!
Nachtrag:
Ich habe jetzt eine Lösung gefunden:
var form_teamselect = $('#teamselectform');
var newOptionhtml = '';
$('.teamselect').on('change', function(e) {
e.preventDefault();
$.ajax({
url : 'index.php?tippspiel-selectteams',
type : 'POST',
dataType : 'json',
data : form_teamselect.serialize(),
success : function(response) {
if (response.success) {
newOptionhtml = '<option value="0">Team wählen</option>';
$.each(response.sel_teams, function(index, value) {
newOptionhtml += '<option value="'+index+'">'+value+'</option>';
});
$.each($('.teamselect'), function() {
if ($(this).val() == 0) {
$(this).empty().append(newOptionhtml);
} else {
var selected_value = $(this).val();
var selected_text = $(this).find('option:selected').text();
$(this).empty().append(newOptionhtml);
$('<option value="'+selected_value+'" selected="selected">'+selected_text+'</option>').insertAfter($(this).find('option:first'));
}
});
}
}
});
});
Vielleicht aber gibt es ja noch eine einfachere Lösung...
verwendete ilch Version: 1.1 P
Zuletzt modifiziert von Outi77 am 02.01.2015 - 07:51:10
