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
            resultFragment.appendChild(document.createTextNode(cn.value))
        } else {
            // If the node is a text node (or anything else), copy it as-is
            resultFragment.appendChild(cn.cloneNode(true))
        }
    })

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

    // Set the result to the fragment created above
    resultNode.appendChild(resultFragment)
}

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: https://nessify.co.uk/sandbox/textbuilder/textbuilder.html

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.