CODEWITHSUNDEEP
jquery
user759235
user759235

Reputation: 2207

Click events on a select element solution

I'm using a select field to add(on click) stuff to a textarea element, as 'click' events do not work proper with a select fields, I'm using jQuery 'change' instead, this however give's me the following problem, once clicked on the option this option can not be clicked again only after a new option has been selected.

Is there a way to use the 'click' event way on a select field as I dont want to build a fake select field.

--

Change:

$('.select').change(function(e){
    alert($(this).val());
});

Upvotes: 0

Views: 60

Answers (3)

lzzluca
lzzluca

Reputation: 816

$(".select").change(function(e){
    // I remove the selected attribute on the selected options
    $(this).find(":selected")
        .attr("selected", false)
    // Then I apply a fake selection class: the options will look as selected
        .addClass(toLookLikeSelected);

});

The purpose of this piece of code (that I did not tested) is to unselect an option when you click on it: because it gets (selected and then) unselected, you can click on it again! So, now you can get the selected options by:

$("select option." + toLookLikeSelected);

I have built a jQuery plugin on that idea: http://nerdstuckathome.wordpress.com/2012/08/10/multi-select-avoiding-ctrl-button/

I hope this help.

Luca

Upvotes: 1

Luca Putzu
Luca Putzu

Reputation: 1456

Tried out this solution... works for me on chrome. Should test it on other browsers though:

HTML

<select>
    <option></option>
    <option>a</option>
    <option>b</option>
    <option>c</option>
</select>

Javascript

$("select").change(function () {
    alert("Append this value to textarea: "+$(this).val());
    $(this).val(""); //reset the <select> value to accept multiple repeated values
})

Upvotes: 0

Youness
Youness

Reputation: 1495

try this :

HTML :

<select class="select">
    <option value="t1">test1</option>
    <option value="t2">test2</option>
    <option value="t3">test3</option>
    <option value="t4">test4</option>
    <option value="t5">test5</option>
</select>

JQUERY : 

var clicked_once=false;
    $('.select').click(function (e) {
        if(clicked_once){
            alert($(this).val());
        }
        clicked_once=!clicked_once;
    });

Upvotes: 0

Related Questions