3

In the following code when I change the selection, there will be an alert. I am trying to make the function like when I click on the option then it will show an alert. 

$(document).ready(function() {
  $("#x").change(function() {
    alert("Haha");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="x">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>

In the below code there is no effect when I click on the options already selected options. for example a is selected then i click a is no effect.

$(document).ready(function() {
  $("#x").on("option", "click", function() {
    alert("Haha");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="x">
  <option selected>A</option>
  <option>B</option>
  <option>C</option>
</select>

because i want to trigger event while i re-clicking the selected option.

click selection box->drop menu->click selected option->trigger event

Can anyone help me?

K2R
  • 41
  • 1
  • 9
  • 2
    Possible duplicate of [jquery select option click handler](https://stackoverflow.com/questions/5749597/jquery-select-option-click-handler) – Carsten Løvbo Andersen Dec 20 '18 at 11:03
  • `option` elements do not raise mouse events. Why do you need this? If you want to know the option which was selected just use `$(this).val()` within the `change` event handler – Rory McCrossan Dec 20 '18 at 11:03
  • You should add closing curly bracket for the click function. – Waleed Iqbal Dec 20 '18 at 11:03
  • Check [How to use onClick() or onSelect() on option tag in a JSP page?](https://stackoverflow.com/questions/3487263/how-to-use-onclick-or-onselect-on-option-tag-in-a-jsp-page/3487274#3487274) – Mohammad Dec 20 '18 at 11:06
  • what about `$('selector').on('click', function(){console.log('clicked');}); $('selector').trigger('click');` ? – mtizziani Dec 20 '18 at 11:11
  • I think you can make a customized drop down menu and bind the click event. – suertang Dec 20 '18 at 11:24
  • this can be happen in is select is multiple. in this case i am not sure. but If multiple $("select option").click(function() { var clickedOption = $(this); console.log(clickedOption.text()); – AJAY MAURYA Dec 20 '18 at 11:26
  • Thanks for all, and AJAY MARURYA you are right, although select option can't trigger in Chrome but can trigger in IE. – K2R Dec 21 '18 at 02:34

3 Answers3

1

"click selection box->drop menu->click selected option->trigger event"

First of all do not use alert(), it prompts for an extra click you really don't need to waste your time on. Use console.log().

The following demo:

  • Delegates the click event to select#x:

$('#x').on('click',...

  • Once clicked, it will trigger a focus event on every even click✱:

✱ if (cnt % 2 === 0) { $(this).trigger('focus');}

  • select#x is also delegated to the focus event and will call optionTrigger():

$('#x').on('focus', optionTrigger);

  • function optionTrigger() will log the selected <option> index and text:

✱ if (cnt < 2) {...

...$(this).trigger('blur'); }

var idx = $(this)[0].selectedIndex;

var txt = $(this).find('option').eq(idx).text();

Demo

var cnt = 1;

$("#x").on("click", function(e) {
  if (cnt % 2 === 0) {
    $(this).trigger('focus');
  }
  cnt++;
});

$('#x').on('focus', optionTrigger);

function optionTrigger(e) {
  if (cnt < 2) {
    $(this).trigger('blur');
  } else {
    var idx = $(this)[0].selectedIndex;
    var txt = $(this).find('option').eq(idx).text();
    console.log(idx + ': ' + txt);
  }
}
<select id="x">
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Community
  • 1
  • 1
zer00ne
  • 41,936
  • 6
  • 41
  • 68
0

Have you tried bind with select e.g.:

$('#x').bind('click', function(){
    console.log('Clicked') 
 });

If this doesn't work do tell. Thanks Hope this helps.

kshitij
  • 642
  • 9
  • 17
  • Thanks~This will trigger the selection box clicked after that you see the drop down menu come out, if you click the selected option there will be no happened. – K2R Dec 21 '18 at 02:37
0

Do you need to execute your code while clicking on Dropdown???

If Yes, here is the code for you

https://jsfiddle.net/shoesheill/gjLyxo5d/6/

If not please leave a comment along with your requirements.

$(document).ready(function() {
  $("#x").off().on('click',function() {
    alert("Haha");
  });
});
Sushil
  • 1,111
  • 1
  • 10
  • 23
  • Thanks i need to execute the codes while i re-clicking selected option – K2R Dec 21 '18 at 02:35
  • if you find it effective voteup my answer, or accept it as your best answer it you be helpful for both of us @K2R – Sushil Dec 21 '18 at 03:45