Wie kopieren und ein html wählen ausgewählten Wert auf andere wählt einfügen

Question

ich eine Seite mit mehreren select Elemente in der gleichen Form

<select> 
    <option value="">Select ...</option> 
    <option value="1">Apple</option> 
    <option value="2">Banana</option> 
    <option value="3">Carrot</option> 
    <option value="4">Orange</option> 
    <option value="5">Pear</option> 
</select> 

Es gibt 8 wählt mit den exakt gleichen Optionen auf der Seite entwickelt haben. Der Benutzer möchte die ausgewählten Werte eines select von einem zum anderen kopieren und einfügen.

Der Endbenutzer initiiert es mit Strg + C, Strg + V. Die Web-App wurde geschrieben, um eine Excel-App zu ersetzen, die Kopieren und Einfügen durch den Endbenutzer erlaubt

Allerdings unterstützt eine HTML select nicht kopieren und einfügen. (Strg + C, Strg + V)

Was kann ich tun?

Irgendein Plugin, das das vielleicht tun kann? Jede minimale Autovervollständigung auswählen, um darauf hinzuweisen, dass das wie der Standard aussieht select?

Edit:

können die Datenliste Beispiel unter Verwendung einer Lösung sein. Das einzige Problem ist, dass es erlaubt, dass ungültiger Text, d. H. Text, der nicht eine der Auswahloptionen (abgesehen von nichts) ist, eingegeben wird. Wie erlaube ich nur gültigen Text?

Answer 1

sollten Sie datalist verwenden und keine gültige Eingabe wie folgt behandeln:

$('input[list]').on('change', function() { 
 
    var options = $('option', this.list).map(function() { 
 
    return this.value 
 
    }).get(); 
 
    if (options.indexOf(this.value) === -1) { 
 
    this.value = ""; 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input list="food1" name="food1" placeholder="Select..."> 
 
<datalist id='food1'> 
 
    <option disabled>Select ...</option> 
 
    <option value="Apple">Apple</option> 
 
    <option value="Banana">Banana</option> 
 
    <option value="Carrot">Carrot</option> 
 
    <option value="Orange">Orange</option> 
 
    <option value="Pear">Pear</option> 
 
</datalist> 
 
<input list="food2" name="food2" placeholder="Select..."> 
 
<datalist id='food2'> 
 
    <option value="Apple">Apple</option> 
 
    <option value="Banana">Banana</option> 
 
    <option value="Carrot">Carrot</option> 
 
    <option value="Orange">Orange</option> 
 
    <option value="Pear">Pear</option> 
 
</datalist>

Answer 2

Stellen Sie den „Wert“ Attribut eines wählen, die der anderen mit

document.getElementById('[select element1]').value = document.getElementById('[select element2]').value; 

Sie dies für eine Schaltfläche in der onClick-Handler setzen können, wenn Sie wollen.

Answer 3

Try Datalist

<input list="foods" name="food"> 
    <datalist id='food'> 
     <option value="1">Select ...</option> 
     <option value="1">Apple</option> 
     <option value="2">Banana</option> 
     <option value="3">Carrot</option> 
     <option value="4">Orange</option> 
     <option value="5">Pear</option> 
    </datalist> 

http://www.w3schools.com/tags/tag_datalist.asp

Answer 4

Siehe @Hashbrown Antwort in Copy selected item's text from select control html Frage verwenden. Sicherlich würde es dir helfen, da es teilweise deine Frage erfüllt.

Sie können auch einen Blick auf How do I copy to the clipboard in JavaScript? werfen, da es viele Informationen zu Ihrer Frage hat.

Viel Glück!

Answer 5

diesen Code Versuchen

var src=document.getElementById('src'); 
    var des=document.getElementById("des"); 
    var opt=document.createElement("Option"); 
    opt.value = src.options[src.selectedIndex].value; 
    opt.text = src.options[src.selectedIndex].text; 
    des.options.add(opt); 

Answer 6

das Datalist-Element Siehe: http://www.w3schools.com/tags/tag_datalist.asp

es wie folgt verwendet:

<input list="browsers" name="browserselect" type="text"/> 

<datalist id="browsers"> 
    <option value="Internet Explorer"> 
    <option value="Firefox"> 
    <option value="Chrome"> 
    <option value="Opera"> 
    <option value="Safari"> 
</datalist> 

Die Liste Attribut des Eingangselements, um das Eingangselement erzählt Verwenden Sie den Datenlistenersteller mit dieser ID.