how to trigger click event on select option

Question

i want to click the option something like this..

JS

$("#practice-area optgroup option").click(function(){
// code function here
});

HTML

<select name="practice-area" id="practice-area">
    <option value="0">Select</option>
    <optgroup label="NSW">
        <option value="1397">Armidale</option>
    </optgroup>
    <optgroup label="NT">
        <option value="1402">Darwin</option>
    </optgroup>
</select>

Possible duplicate of [Change – Tomasz Lloyd Jun 27 '18 at 00:47 — Tomasz Lloyd, Jun 27 '18 at 00:47
You should use "change" as oppose to "click" – Liang Jun 27 '18 at 00:49 — Liang, Jun 27 '18 at 00:49

score 0 · Answer 1 · answered Jun 27 '18 at 00:48

You should use change event handler on select not the option.

option doesn't have a click event handler, so you can get the option selected by the select using $('select :selected') or $('select option:selected')

$("#practice-area").click(function(){
  // do what you want when you click select
  console.log('select clicked');
});

// normally use change
$("#practice-area").change(function(){
  console.log('change to ' + $(this).find(':selected').text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="practice-area" id="practice-area">
    <option value="0">Select</option>
    <optgroup label="NSW">
        <option value="1397">Armidale</option>
    </optgroup>
    <optgroup label="NT">
        <option value="1402">Darwin</option>
    </optgroup>
</select>

how to trigger click event on select option

1 Answers1