linked comboboxes in html

Question

Basically my webpage has two comboboxes. First combo box is populated with data comming from MySql. There is a button Add to the side of combo box and when user selectes a item in combo box 1 , clicks on the Add button, that item should get added to the second combo box that is in the same page. Can anyone please tell me how to do this in javascript? or anything?

By the way my web pages are PHP pages.

Thanks.

Answer 1

Hey. You could use a Javascript function like this:

function moveSelectedOption() {
    // Fetch references to the <select> elements.
    var origin = document.getElementById('origin_select');
    var target = document.getElementById('target_select');

    // Fetch the selected option and clone it.
    var option = origin.options[origin.selectedIndex];
    var copy = option.cloneNode(true);

    // Add the clone to the target element.
    target.add(copy, null);
}

Then you just add a call to it to the button's onclick event.

<button onclick="moveSelectedOption()">Add</button>

If you want to move it rather than copy it, remove the cloneNode line and just add the original option.