Question

I have two little changes I want to make.

            var selectedOption = jQuery("#modulesDrop option:selected");
            selectedOption.appendTo($("#moduleselect"));
            $('option.red').appendTo($("#moduleselect"));

1. How can I get the selectedOption to be removed from the #moduleDrop and #moduleselect.

2. I have a class $('option.red') and I only want it to append to #moduleselect if the contents in #moduleselect is empty.

#moduleSelect is a multiple select box while ‘#modulesDrop’ is a drop down menu.

Below is a jsfiddle

http://jsfiddle.net/DfSGE/6/

Simply follow the steps to use fiddle:

1. You will see a drop down menu, select a course from the drop down menu.
2. You will see the details of the selected course from the drop down menu are displayed. Click on the “Remove Module” submit button.
3. Confirm the confirmation box. Nope happens at mo but I want the selected module in the drop down menu to be remove from the drop down menu and from the select box

Answer 1

“How can I get the selectedOption to be removed from the #moduleDrop and #moduleselect.“

var selectedOption = $("#modulesDrop").val();
$("#modulesDrop option[value='" + selectedOption + "']").remove();
$("#moduleselect option[value='" + selectedOption + "']").remove();​

“I have a class $(‘option.red’) and I only want it to append to #moduleselect if the contents in #moduleselect is empty.“

$('#moduleselect:not(:has(option))').addClass('red');