Solution 1 :

You can read the selected value using the value property of the select tag. Try this:

function transfer() {
    const originalNode = document.getElementById('original')
    const resultNode = document.getElementById('result')

    // Iterate over all the nodes within the original node
    const resultFragment = document.createDocumentFragment()
    originalNode.childNodes.forEach(cn => {
        if (cn.nodeName === 'SELECT') {
            // If the node is a 'select' tag, read its value as text
        } else {
            // If the node is a text node (or anything else), copy it as-is

    // Reset the result node
    resultNode.innerHTML = ""

    // Set the result to the fragment created above

Problem :

I have a text phrase on an HTML page that is built, in part, from dropdown lists of words (built from arrays).

I want to be able to push a button and transfer the text of the phrase to another div.

The problem is – it transfers ALL of the options in the dropdown list and not just the one I select.

Here is a working example:

function transfer() {
    total = document.getElementById('original').innerText;
    document.getElementById('result').innerHTML = total;

This is the function I’m using to ‘transfer’. I’ve also tried…

function transfer() {
    total = document.getElementById('original').innerHTML;
    document.getElementById('result').innerHTML = total;

I’m guessing I have to convert the HTML in ‘original’ to plain text somehow… but I don’t know how.


Comment posted by r_batra

Can you add more code, it looks like you are concatenating the contents of div instead of replacing it

Comment posted by stilts77

Hi. I’m not sure I am… it replaces what was there. If I press again, it replaces.