Selecting all options from SelectList on button submit, before POST

Question

I have a User being reviewed drop down list, a SelectList of employees, and an empty Select List of Assigned Reviewers. When the admin double clicks an employee in the SelectList, it is appended into the Assigned Reviewers SelectList for the User being reviewed.

Here is a visual picture:

As you can see, I have jQuery selecting all options in the Assigned Reviewers SelectList, but if you click on one of them, it will deselect the other options and only append the selected option to a table. I would be able to disable this List, but I want the user to be able to remove from this List as well. I've tried using this code on bttn submit, but it only appended the one I had selected:

        submit_bttn.click(function () {
        $('.selectionList select option').prop('selected', true);
    });

I've even tried adding a second function on double click to append the selected attribute to the option, which works, but is removed once the user clicks out of scope.

One thing I thought of doing was storing the values in hidden input fields, but I feel like this is unnecessary and would be more code for removing from the List.

Also, I am using razor view: @Html.ListBox(selectList from viewbag).

Any help would be splendid.

Solution 1

you forgot the '.' at the className of selectionList:

submit_bttn.click(function () {
    $('.selectionList select option').prop('selected', true);
});

• if the other select has the class selectionList then the selector should be 'select.selectionList option' (without the space) or just '.selectionList option'

edit:
following your comment, to debug the problem, hook to the submit of the form to cancel it and see if all the options were selected:

//assuming you have only one form on the page..
$("form").submit(function(event){event.preventDefault() });

Solution 2

After some research, I found that setting the property in the DOM is the correct way of selecting all of the options and setting selected property to true, not selected.

On bttn submit, all of the options get highlighted!

    submit_bttn.click(function () {
        $('.selectionList option').each(function () {
            $(this).attr('selected', true);
        });
    });

Comments

[Ben Sewards]

Other than that being embarrassing, it still doesn't select all of them on bttn submit, which is a POST through the controller. Thanks for the slight error though.

[Avi Pinto]

maybe the selector for submit_bttn is also wrong? if it selected nothing then the click event will do nothing

[Ben Sewards]

My solution is below. Thanks for the help, +1

[Avi Pinto]

look here jsfiddle.net/8a8fB using prop is the way to go when changing dom properties, the attribute represent the HTML that came down to the client + no need to use each and set every option individually

[Avi Pinto]

a better example jsfiddle.net/8a8fB/2 click the button and see that the values are sent in fiddler

[Ben Sewards]

those examples don't work when you highlight only one of the options and then click submit.

[Avi Pinto]

it does work for me, open jsfiddle.net/8a8fB/3 and watch the request in fiddler - the request will always contain the three values, you might be doing something else wrong. maybe create a fiddle with your scenario and i will play with it

[Ben Sewards]

Just noticed it worked, thanks for the alternative! +Best Answer