Question

我希望切换一个选择元素。我有一个Select标签，如下所示： -

 <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>

从html中可以看出，所选选项的值为10047＆amp; 10046.这是浏览器中的原生选择。我想切换选项。也就是说当用户第一次点击它们时，它们会被突出显示（选中）＆amp;当用户第二次点击同一元素时，元素未被突出显示（取消选择）。

我试图实现这一点的jquery如下： -

highlightOrg: function(event){

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

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

}

元素突出显示（选中），但当用户第二次点击它时，它不会突出显示（取消选择）。任何帮助表示赞赏。

Answer 1

为什么不制作自己的输入元素，而不是试图超选一个选择来对最终用户做一些反直觉的事情呢？

您可以简单地使用样式化的div元素向用户显示数据，并使用一些JavaScript / jQuery来处理它：

<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获取值：

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

    return values;
}

JSFiddle Demo

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

1 个答案: