2

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
});
H. beyraghdar
  • 83
  • 1
  • 7
  • Hi, you have a wrong bracket in your code ``. Is this your actual code or just a typo in your question? – Andre Aug 18 '19 at 08:17
  • 1
    oh, thanks for your comment. I will fix this, but its not in my running code. – H. beyraghdar Aug 18 '19 at 08:20
  • You're welcome. I found this https://stackoverflow.com/questions/15452103/jquery-select-change-event-when-selecting-the-same-value perhaps that's interesting for you. – Andre Aug 18 '19 at 08:30
  • 1
    There's not a real possibility and nearly all solutions will fail in at least one browser. Can you refactor your code to eliminate the need to do this? – baao Aug 18 '19 at 08:32
  • @Nope That don't work in my problem. – H. beyraghdar Aug 18 '19 at 11:06
  • @chrispbacon Not really. I tried that before asking here but unfortunately, I don't find any solution that solve this issue and I really need a solution for this problem. – H. beyraghdar Aug 18 '19 at 11:07

2 Answers2

0

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>
Andre
  • 1,042
  • 12
  • 20
Ege Ismail Kösedağ
  • 11
  • 3
-1

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.

Rohit Mittal
  • 2,064
  • 2
  • 8
  • 18