Select box option not show selected

Question

I'm trying to copy or move one select box item to another select box. The problem is that when one or more items are moved from the first box to the second, it should be selected. But it's not working.

My Code

function SelectMoveRows(SS1,SS2)
{


    var SelID='';
    var SelText='';
    var SelText2='';
    // Move rows from SS1 to SS2 from bottom to top
    for (i=SS1.options.length - 1; i>=0; i--)
    {
        if (SS1.options[i].selected == true)
        {
            SelID=SS1.options[i].value;
            SelText=SS1.options[i].text;
            SelText2=SS1.options[i].attr("selected");

            var newRow = new Option(SelText,SelID,SelText2);
            SS2.options[SS2.length]=newRow;
            SS1.options[i]=null;
        }
    }
    SelectSort(SS2);
}

Then I use

   SelText2=SS1.options[i].attr("selected");

But it's not working. If I use:

SelText2=SS1.options[i].select=true;

then option looks like:

<option value="3" selected="">Delivery</option>

But it should be:

<option value="3" selected="selected">Delivery</option>

`SelText2=SS1.options[i].attr("selected");` why would that work? You're trying to use a jQuery method (`attr('selected')`, which is a *getter*, it retrieves the value of the attribute), and you're chaining it to a DOM node, which has no access to jQuery methods anyway. Did you look at your browser's JavaScript console (press 'F12', if not)? And what's the relevant HTML to go along with this JavaScript? (You don't appear to be using jQuery, you'd probably be best off removing that tag, unless you're using it elsewhere and a jQuery solution is welcome.) — David Thomas, Feb 05 '15 at 16:42

score 0 · Answer 1 · answered Feb 05 '15 at 11:31

0

In the option tag, the attribute selected doesn't need a value:

<option value="3" selected>Delivery</option>

is the same as

<option value="3" selected="selected">Delivery</option>

check it here:

http://jsfiddle.net/n99L2xhv/1/

answered Feb 05 '15 at 11:31

Nelson Teixeira

6,297
5
36
73

score 0 · Answer 2 · edited May 23 '17 at 11:44

0

you should use .prop not .attr

e.g.

SelText2=SS1.options[i].prop("selected", true);

for reference: .prop() vs .attr()

Update I would go about doing this as follows;

<select id="select1">
    <option value="1">Option1</option>
    <option value="2">Option2</option>
</select>

<select id="select2">
    <option value="3">Option3</option>
</select>

$("#select1").change(function(){
    $("#select1 option:selected").each(function() {
        var option = $(this);
        $("#select2").append(option);
        $("#select1").remove(option);
    });
});

This will shift the selected option from Select 1 to Select 2 when it is chosen.

edited May 23 '17 at 11:44

Community

1
1

answered Feb 05 '15 at 11:32

Whiplash450

943
2
12
22

And why? Any reference? – Max Leske Feb 05 '15 at 11:56
`SS1.options[i]` is not a jquery object – billyonecan Feb 05 '15 at 16:09

John S · Answer 3 · 2015-02-06T00:12:06.730

As pointed out by David Thomas in the comments, .attr() is not a valid method on a select element; It is a method on a jQuery object, which you don't have.

You could just pass true as the parameter to the Option constructor, and the third parameter is really the defaultSelected property, while the fourth paramter is the selected property.

for (var i = SS1.options.length - 1; i >= 0; i--) {
    var option = SS1.options[i];
    if (option.selected) {
        SS2.add(new Option(option.text, option.value, false, true));
        SS1.remove(i);
    }
}

You could use option.selected instead of true, but because of the if-statement, you know option.selected will always be true.

jsfiddle

Select box option not show selected

3 Answers3