我需要在选项标签中切换选择元素

Question

Am looking to toggle a select element. I have a Select tag as follows :-

 <select id="orgAssign" multiple="true">
   <option selected="" value="10047">test1</option>
   <option selected="" value="10046">test2</option>
   <option value="10033">test3</option>
   <option value="10032">test4</option>
</select>

As seen from the html, the selected options have values, 10047 & 10046. This is native select from the browser. I want to toggle the options. That is When the user clicks on them the first time, they are highlighted(selected) & when the user clicks on the same element the second time the element is unhighlighted(deselected).

The jquery am trying to achieve this is as follows:-

highlightOrg: function(event){

    var $el = $(event['target']);

    $el.toggle().css({'background-color':'#dadfff'});

}

The element is highlighted(selected), but when the user clicks on it the second time, it is not unhighlighted(deselected). Any help is appreciated.

Answer 1

Instead of trying to overload a select to do something counter-intuitive to the end user, why not make your own input element?

You can simply use styled div elements to present the data to the user, and a little JavaScript/jQuery to handle it:

<div id="orgAssign" class="selectGroup">
   <div class="selectItem selected" data-value="10047">Test 1</div>
   <div class="selectItem selected" data-value="10046">Test 2</div>
   <div class="selectItem" data-value="10033">Test 3</div>
   <div class="selectItem" data-value="10032">Test 4</div>
</div>

jQuery to toggle elements:

$('.selectItem').on('click', function() {
    $(this).toggleClass('selected');
    getValues();
});

jQuery to get values:

function getValues() {
    var values = [];
    $('#orgAssign .selected').each( function() {
           values.push($(this).data('value'));
    });

    return values;
}

JSFiddle Demo