CODEWITHSUNDEEP
jqueryhtml
Zapnologica
Zapnologica

Reputation: 22556

How can I control which options are displayed in each of my two <select> elements?

I have the following segment of code:

<p>
   <label>Dual Select</label>
    <span id="dualselect" class="dualselect">
        <select name="select3" multiple="multiple" size="10">
            <option value="">Selection One</option>
            <option value="">Selection Two</option>
            <option value="">Selection Three</option>
            <option value="">Selection Four</option>
            <option value="">Selection Five</option>
            <option value="">Selection Six</option>
            <option value="">Selection Seven</option>
            <option value="">Selection Eight</option>
        </select>
        <span class="ds_arrow">
            <span class="arrow ds_prev">&laquo;</span>
            <span class="arrow ds_next">&raquo;</span>
        </span>
        <select name="select4" multiple="multiple" size="10">
            <option value=""></option>
        </select>
    </span>
</p>

It renders in the browser like this: view html code produces

(I am using asp.net mvc4 to display this code.)

How do I go about being able to specify which option goes on which side initially?

For example, I want all of the possible options on the left, and I want all of the options that I am registered for on the right.

Edit: I tried specifying this in the HTML (i.e. by putting all of the options that I am registered for in the second <select>), but I still got the same rendering when I loaded the page.

There are a few jQuery files included at the top of the page that came with the theme. I think the following jQuery deals with this control:

jQuery(document).ready(function(){

//dual box
var db = jQuery('#dualselect').find('.ds_arrow .arrow');    //get arrows of dual select
var sel1 = jQuery('#dualselect select:first-child');        //get first select element
var sel2 = jQuery('#dualselect select:last-child');         //get second select element

sel2.empty(); //empty it first from dom.

db.click(function(){
    var t = (jQuery(this).hasClass('ds_prev'))? 0 : 1;  // 0 if arrow prev otherwise arrow next
    if(t) {
        sel1.find('option').each(function(){
            if(jQuery(this).is(':selected')) {
                jQuery(this).attr('selected',false);
                var op = sel2.find('option:first-child');
                sel2.append(jQuery(this));
            }
        }); 
    } else {
        sel2.find('option').each(function(){
            if(jQuery(this).is(':selected')) {
                jQuery(this).attr('selected',false);
                sel1.append(jQuery(this));
            }
        });     
    }
});
}

Upvotes: 1

Views: 174

Answers (1)

Paul D. Waite
Paul D. Waite

Reputation: 98796

The options you want on the left should go in the first <select> element (name="select3").

The options you want on the right should go in the second <select> element (name="select4").

Basically, exactly how it is now.

Edit: ah - the following line in your jQuery file is emptying the second <select> element on document ready for some reason.

sel2.empty();

For reference, the <label> element is being used incorrectly. Each <label> is meant to have one form element (referenced by id in the <label>'s for attribute) that it labels, otherwise it's a bit useless (see http://www.w3.org/html/wg/drafts/html/master/forms.html#the-label-element).

To label multiple form elements (like your two <select>s), you wrap them in a <fieldset> element, and use the <legend> element inside the fieldset.

Upvotes: 2

Related Questions