CODEWITHSUNDEEP
javascriptjqueryhtml
Nicolas
Nicolas

Reputation: 93

Choosing same option in select list

What I have is a html select list that is populated through jquery. Right now I have the change event so that when I change the option, the map refocuses on the POI. I'm trying to make it work so that when I click on the same option, the map treats it as a change event. Options don't support click events, and adding a click event on the select list doesn't work either, seeing as there would be 2 click events.

In summary, .change() doesn't trigger if you click the same option.

Is there a way to make this work, a modification to the option tag or another event I may not be aware of?

Thanks!

Upvotes: 1

Views: 2446

Answers (3)

kaarto
kaarto

Reputation: 803

I had the very same problem, but also needed it to work on mobile, so I combined couple different solutions. Unfortunately I didn't find a way to do all this without triggering the target function multiple times, so I ended up limiting it with setTimeOut. :(

It's far from perfect, but works in my scenario:

<select id="select">
  <option disabled selected>Pick one..</option>
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
  <option value="4">four</option>
  <option class="dummy" style="display:none">Pick one..</option>
</select>

And jQuery:

var canDo = true; //variable for settimeout

$('#select').on('focus',function(){
  $(this).find("option.dummy").text($(this).find("option:selected").text());
  $(this).find("option.dummy").prop("selected", true);
  $(this).data('click', true);
});

$('#select').on('change blur',function(){
  //blur is optional and offers solution to the case where user closes options
  //in mobile ja taps away (if you then want to trigger the function). BUT, it 
  //also causes a bug: if user opens options and clicks the topmost option, which
  //is the header bar showing currently selected option, options are hidden and 
  //function triggered - but the focus stays on the element, so when user clicks
  //away, function is re-triggered.
  var select = $(this);
  var text = select.find("option:selected").text();

  $('.dummy').attr('value',select.val()).text(text);
  doYourThing($(select).val());
});

$('#select option').on('click',function(){ //note that we're checking clicks to option instead of select
  if($(this).data('click')){
    $(this).data('click', false);
    doYourThing($(select).val());
  }else{
    $(this).data('click', true);
  }
  $(this).parent().blur();
});

function doYourThing(stuff){
  if(canDo){
    canDo = false;
    alert('Selected '+stuff);
    canDoTimeout = setTimeout(function(){ 
        canDo = true; 
    }, 500);
  }
}

jsFiddle: http://jsfiddle.net/nxabv0wk/3/

Upvotes: 0

dfsq
dfsq

Reputation: 193261

Try to do something like this:

$('select').on({
    change: function(e) {
        alert('change')
        $(this).data('change', true);
    },
    click: function() {
        if (!$(this).data('change')) {
            $(this).trigger('change');
        }
        $(this).data('change', false);
    }
});

http://jsfiddle.net/WFmpW/1/

So the idea is to trigger change event on click only if there were not previous option change. To do this we can set some flag like I did with data-change.

Correct answer:

I'll just edit this answer so I can accept this as the correct answer seeing as the idea is right but the implementation isn't. The correct way is to take out the .change event. Link to the correct code: http://jsfiddle.net/qcJwm/1/.

Code:

$('select').click(function () {
    if ($(this).data('click')) {
        doStuff();
        $(this).data('click', false);
    } else {
        $(this).data('click', true);
    }
});

var doStuff = function () {
    alert('stuff');
}

Upvotes: 6

Martijn
Martijn

Reputation: 16103

You could add a first option with no value. On change you change the value of the first option to that of the selected option and perform your ´goto-code'.

Because you want to be able to change it again, you have to make the first option selected with $('item')[0].selectedIndex=0. This will not be noticable by the user, because it has the same value. Because of this, your user can change it again to the option they just selected, to fold it back

Upvotes: 0

Related Questions