CODEWITHSUNDEEP
javascriptjqueryjquery-selectbox
H. beyraghdar
H. beyraghdar

Reputation: 83

Call a function when a selected item is selected again

I have a dropdown menu in my web page. I already used x.change(y); to do some thing when the selected item changes. But I want to call a function when the user selecting the same selected item.

Here is my HTML code.

<select class="dropdown dateFilter" id="month" data-live-search="true" name="month">
  <option value="">Month</option>
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>

and related js:

$('#month').change(function () {
  //Do some things
});

Upvotes: 2

Views: 966

Answers (2)

Ege Ismail K&#246;sedağ
Ege Ismail K&#246;sedağ

Reputation: 11

I preferred to use onclick. Give it a try maybe it will help you

document.querySelector("select.dropdown").onclick = (event)=>{
  if(event.clientX == 0 && event.clientY == 0){
    value = event.target.value;
    console.log("selected "+value)
  }
}
<select class="dropdown dateFilter" id="month" data-live-search="true" name="month">
  <option value="">Month</option>
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>

Upvotes: 0

Rohit Mittal
Rohit Mittal

Reputation: 2104

You can make a click event on select option and can cross check clicked option and selected dropdown value as below:

$(document).ready(function(){
    $('[name=month] option').click(function() { 
        if ($(this).attr('value') == $("#month").val()) {
            // user clicked on selected option
        } else {
            // user clicked on another option
        }
    });
});

Your HTML code as:

<select class="dropdown dateFilter" id="month" data-live-search="true" name="month">
  <option value="">Month</option>
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
</select>

Hope it helps you.

Upvotes: -1

Related Questions