Copy Options?
function copyOptions(sourceId, ...targetIds) {
var sourceSelect = document.getElementById(sourceId);
targetIds.forEach(function(targetId) {
var targetSelect = document.getElementById(targetId);
targetSelect.innerHTML = '';
for (var i = 0; i < sourceSelect.options.length; i++) {
var option = sourceSelect.options[i];
targetSelect.add(new Option(option.text, option.value, option.defaultSelected, option.selected));
}
});
}
copyOptions('name1.1', 'name1.2', 'name1.3', 'name1.4', 'name1.5', 'name1.6', 'name1.7', 'name1.8', 'name1.9', 'name1.10', 'name1.11', 'name1.12');
copyOptions('name2.1', 'name2.2', 'name2.3', 'name2.4', 'name2.5', 'name2.6', 'name2.7', 'name2.8', 'name2.9', 'name2.10', 'name2.11', 'name2.12');
Die aller letzte Zeile wird nicht annerkannt und die Optionen werden nicht von name2.1 weiter kopiert woran liegt das? Wenn ich die Vorletzte Zeile entferne klappt es aber. Kann wer helfen?
Der komplette Code
<section class="boxes">
<div class="buybox" data-name="F">
<img src="pferde/schwarzer f.jpg" class="hjpg">
<h2> Friesian Horse </h2>
<h3> Price    : 950 Star Coins <img src="images/st.jpg" class="sc"></h3>
<h3> Location : Silverglade Village </h3>
<select id="name1.1" class="name1">
<option value="1">Choose</option>
<option value="1.1">A</option><option value="1.2">Abyss</option><option value="1.3">Acacia</option>
<option value="1.4">Acs</option><option value="1.5">Agate</option><option value="1.6">Air</option><option value="1">Alpha</option>
</select>
<select id="name2.1" class="name2">
<option value="1">Horsename</option>
<option value="1">Yellw</option>
<option value="1">Yeow</option>
</select>
<button class="moreinfo"onclick="moreinfo()">More Information</button>
<button class="add"onclick="add()">Add to list</button>
</div>
<div class="buybox" data-name="F">
<img src="pferde/schwarzer f.jpg" class="hjpg">
<h2> Friesian Horse </h2>
<h3> Price    : 950 Star Coins <img src="images/strcoin.jpg" class="sc"></h3>
<h3> Location : Silverglade Village </h3>
<select id="name1.2" class="name1"></select>
<select id="name2.2" class="name2"></select>
<button class="moreinfo"onclick="moreinfo()">More Information</button>
<button class="add"onclick="add()">Add to list</button>
</div>
</section>
</div>
<div class="basket">
</div>
</section>
</body>
<script>
function copyOptions(sourceId, ...targetIds) {
var sourceSelect = document.getElementById(sourceId);
targetIds.forEach(function(targetId) {
var targetSelect = document.getElementById(targetId);
targetSelect.innerHTML = '';
for (var i = 0; i < sourceSelect.options.length; i++) {
var option = sourceSelect.options[i];
targetSelect.add(new Option(option.text, option.value, option.defaultSelected, option.selected));
}
});
}
copyOptions('name1.1', 'name1.2', 'name1.3', 'name1.4', 'name1.5', 'name1.6', 'name1.7', 'name1.8', 'name1.9', 'name1.10', 'name1.11', 'name1.12');
copyOptions('name2.1', 'name2.2', 'name2.3', 'name2.4', 'name2.5', 'name2.6', 'name2.7', 'name2.8', 'name2.9', 'name2.10', 'name2.11', 'name2.12');
Kannst du die Elemente, von wo kopiert werden soll, noch einstellen?
Welchen Typ haben die?
ist drin
3 Antworten
Du hast keine Elemente mit den IDs 'name1.3'..usw und 'name2.3'..usw. definiert.
Du kannst nichts in ein nichtexistierendes Element kopieren...
Wenn Du meherere Kopien eines Elements anlegen möchtest, kannst du die cloneNode() -Methode verwenden.
<body>
<button onclick="cloneIt('blubb')">Copy von Hand</button>
<section class="boxes" Id="blubb">
<div class="buybox" data-name="F">
<h2> Friesian Horse </h2>
<h3> Price    : 950 Star Coins </h3>
<h3> Location : Silverglade Village </h3>
<select id="name1.1" class="name1">
<option value="1">Choose</option>
<option value="1.1">A</option>
<option value="1.2">Abyss</option>
<option value="1.3">Acacia</option>
<option value="1.4">und so weiter</option>
</select>
<select id="name2.1" class="name2">
<option value="1">Horsename</option>
<option value="1">Yellw</option>
<option value="1">Yeow</option>
</select>
<button class="moreinfo"onclick="moreinfo()">More Information</button>
<button class="add"onclick="add()">Add to list</button>
</div>
</div>
</section>
</body>
<script>
cloneIndex=1 //zähler für erweiterung der ID
function cloneIt( sourceID) {
let node = document.getElementById(sourceID);
const clone = node.cloneNode(true); //komplet mit Subelementen clonen
clone.id = sourceID +'.'+cloneIndex++; //dem Kind eine eigene Id verpassen
console.log('the Id of last clone is: '+ clone.id)
document.body.appendChild(clone); //und ins Document schreiben
}
for (i=1; i<=2;++i){cloneIt('blubb')} //mal automatisch zwei Kopien erzeugen
</script>
...damit hast Du mehrfach die gleichen select-Ids/-Namen.
keine Ahnung was Du eigentlich vorhast, darum spare ich mir diesbezüglich weitere Anpassungen
...für jedes Element die Buttons/Select-Boxen anzulegen ist ohnehin Schwachsinn. An Deiner Stelle würde ich den Aufbau des Projekts noch mal überdenken...
![- (Code, JavaScript, Programmiersprache)](https://images.gutefrage.net/media/fragen-antworten/bilder/534464148/0_big.jpg?v=1708332540000)
Schau nach, ob alle Elemente mit den entsprechenden IDs in deinem Dokument zur Ausführungszeit des Skripts existieren. Wenn es beispielsweise kein Element mit der ID name1.2 gibt, würde die Skriptausführung vorzeitig aufgrund eines Laufzeitfehlers (Zugriff auf ein null-Objekt) abbrechen.
In der Browserkonsole solltest du ebenso eine entsprechende Fehlermeldung erhalten.
Ich würde die Funktion sehr einkürzen und so verwenden:
function copySelect(source, target) {
document.getElementById(target).innerHTML = document.getElementById(source).innerHTML;
}
copySelect("name1.1","name1.2");
copySelect("name2.1","name2.2");
Auch kannst Du eine JSON List (Object) pro Select verwenden und die Werte dort reinkopieren. Wäre noch schöner, denke ich!