ich die Option Tag zu verbergen entschieden statt zu entfernen, da schlug ich vor. Hier ist eine vollständig funktionierende HTML-Datei. Ich würde es auf jsfiddle posten, aber aus irgendeinem Grund würde es nicht funktionieren. Seien Sie sehr vorsichtig, Copy/Paste-Fehler in den .change-Handlern. Habe einige Zeit selbst darüber nachgedacht, warum es nicht funktionierte, aber es war ein Kopier-/Einfügefehler.
Beachten Sie, dass dieser Code nur funktioniert, wenn jedes select-Tag die gleichen Optionen hat. Es funktioniert jedoch dynamisch, wenn Sie Optionen später hinzufügen oder entfernen, während Sie sie wie angegeben synchron halten.
Wenn Sie es brauchen, um mit Listen mit nur einigen der gleichen Optionen zu arbeiten, werden Sie damit beschäftigt sein, IDs für die Optionen zu haben und dann das Verstecken/Entblenden darauf basierend, anstatt auf die Kinder zu indizieren Grundlegende Mechanik ist die gleiche.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<style type="text/css">
.gone {display: none;}
</style>
<script type="text/javascript">
$(document).ready(function() {
// hides the option selected in the others
var hideValue = function(oldval, val, options, others) {
var unhideChild = -1;
var hideChild = -1;
// find which child to hide in the others
// also find the value we change from and unhide it
for (var i=1; i<options.length; i++) {
var optval = $(options[i]).val();
console.log(optval);
if (optval == val) {
hideChild = i;
}
if (optval == oldval) {
unhideChild = i;
}
}
if (unhideChild == -1 && oldval != "None") {
console.log("uh oh");
return;
}
if (hideChild == -1 && val != "None") {
console.log("uh oh");
return;
}
// hide them using the passed in selectors
for (var j=0; j<others.length; j++) {
if (oldval != "None") {
console.log("unhiding: " + others[j] + " v: " + unhideChild);
$($(others[j]).children()[unhideChild]).removeClass("gone");
}
if (val != "None") {
console.log("hiding: " + others[j] + " v: " + hideChild);
$($(others[j]).children()[hideChild]).addClass("gone");
}
}
}
// we need to keep track of the old values so we can unhide them if deselected
var val1 = "None";
var val2 = "None";
var val3 = "None"
$('#101_1').change(function() {
var opts = $('#101_1').children();
var v = $('#101_1').val();
hideValue(val1, v, opts, ["#101_2", "#101_3"]);
val1 = v;
});
$('#101_2').change(function() {
var opts = $('#101_2').children();
var v = $('#101_2').val();
hideValue(val2, v, opts, ["#101_1", "#101_3"]);
val2 = v;
});
$('#101_3').change(function() {
var opts = $('#101_3').children();
var v = $('#101_3').val();
hideValue(val3, v, opts, ["#101_2", "#101_1"]);
val3 = v;
});
});
</script>
</head>
<body>
<select value="None" id="101_1">
<option value="None">None</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select value="None" id="101_2">
<option value="None">None</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select value="None" id="101_3">
<option value="None">None</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</body>
</html>
Wenn Sie auch den Wert "None" benötigen, um nicht dort zu sein, entfernen Sie es. Dann starten Sie einfach die Auswahl ta 101_1 mit 0 ausgewählt, 101_2 mit 1 ausgewählt etc. Stellen Sie dann sicher, dass der Change-Handler ausgelöst wird. Ohne die Option None muss die for-Schleife auch mit i = 0 beginnen.
Also im Grunde diese bis zum Ende des Skripts hinzufügen und sicher var machen i beginnt bei 0 statt 1.
$('#101_1').val('0');
$('#101_2').val('1');
$('#101_3').val('2');
$('#101_1').trigger('change');
$('#101_2').trigger('change');
$('#101_3').trigger('change');
@pedrolobito ich dies ganz neu bin und weiß nicht, wo so starten wurde dies folgende http://StackOverflow.com/Questions/1280499/JQuery-Set-Select-Index –