jQuery prevent change for select

Question

I want to prevent a select box from being changed if a certain condition applies   Doing this doesn t seem to work       my select   bind  change   function ev      if my condition          ev preventDefault        return false            I m guessing this is because by this point the selected option has already changed    What are other ways of doing this

User · Answer

None of the other answers worked for me  here is what eventually did  I had to track the previous selected value of the select element and store it in the data-  attribute   Then I had to use the val   method for the select box that JQuery provides   Also  I had to make sure I was using the value attribute in my options when I populated the select box   lt body gt       lt select id  quot sel quot  gt           lt option value  quot Apple quot  gt Apple lt  option gt          lt  -- Must use the value attribute on the options in order for this to work  -- gt           lt option value  quot Bannana quot  gt Bannana lt  option gt           lt option value  quot Cherry quot  gt Cherry lt  option gt       lt  select gt   lt  body gt    lt script src  quot https   code jquery com jquery-3 5 1 js quot  type  quot text javascript quot  language  quot javascript quot  gt  lt  script gt    lt script gt        document  ready                               Register the necessary events             quot  sel quot   on  quot click quot   sel TrackLastChange              quot  sel quot   on  quot keydown quot   sel TrackLastChange              quot  sel quot   on  quot change quot   sel Change                       quot  sel quot   data  quot lastSelected quot      quot  sel quot   val                              Track the previously selected value when the user either clicks on or uses the keyboard to change        the option in the select box   Store it in the select box s data-  attribute      function sel TrackLastChange                    quot  sel quot   data  quot lastSelected quot      quot  sel quot   val                              When the option changes on the select box  ask the user if they want to change it      function sel Change                 if  confirm  quot Are you sure  quot                                            If the user does not want to change the selection then use JQuery s  val   method to change                the selection back to what it was  previously                 quot  sel quot   val    quot  sel quot   data  quot lastSelected quot                      lt  script gt   I hope this can help someone else who has the same problem as I did

User · Answer

x000D   x000D      my select   bind  mousedown   function  event    x000D           event preventDefault    x000D           event stopImmediatePropagation    x000D           x000D   x000D   x000D

User · Answer

In the event someone needs a generic version of mattsven s answer  as I did   here it is      select   each function           this  data  lastSelected     this  find  option selected             select   change function         if my condition              this  data  lastSelected   attr  selected   true                 select   click function           this  data  lastSelected     this  find  option selected

User · Answer

I was looking for  quot javascript prevent select change quot  on Google and this question comes at first result  At the end my solution was  const  select   document querySelector  quot  your select id quot    let lastSelectedIndex    select selectedIndex     We save the last selected index on click  select addEventListener  quot click quot   function          lastSelectedIndex    select selectedIndex          And then  in the change  we select it if the user does not confirm  select addEventListener  quot change quot   function  e        if   confirm  quot Some question or action quot               select selectedIndex   lastSelectedIndex          return               Here do whatever you want  the user has clicked  quot Yes quot  on the confirm                 I hope it helps to someone who is looking for this and does not have jQuery

User · Answer

None of the answers worked well for me  The easy solution in my case was       selectToNotAllow   focus function e            someOtherTextfield   focus          This accomplishes clicking or tabbing to the select drop down and simply moves the focus to a different field  a nearby text input that was set to readonly  when attempting to focus on the select  May sound like silly trickery  but very effective

User · Answer

If you simply want to prevent interaction with the select altogether when my condition is true  you could always just capture the mousedown event and do your event prevent there   var my condition   true       my select   mousedown function e     if my condition           e preventDefault         alert  Because my condition is true  you cannot make this change               This will prevent any change event from ever occurring while my condition is true

User · Answer

Another option to consider is disabling it when you do not want it to be able to be changed and enabling it     When select should be disabled            my select   attr  disabled    disabled         When select should not be disabled           my select   removeAttr  disabled        Update since your comment  if I understand the functionality you want         dropdown   change function         var answer   confirm  Are you sure you want to change your selection                  if answer                          Update dropdown  Perform update logic                    else                         Allow Change  Do nothing - allow change                                      Demo

User · Answer

You can do this without jquery      lt select onchange  event target selectedIndex   0  gt       lt  select gt    or you can do a function to check your condition   lt select onchange  check event   gt       lt  select gt    lt script gt  function check e       if  my condition           event target selectedIndex   0           lt  script gt

User · Answer

Try this   http   jsfiddle net qk2Pc   var my condition   true  var lastSel       my select option selected         my select   change function      if my condition          lastSel prop  selected   true                my select   click function        lastSel       my select option selected

User · Answer

This worked for me  no need to keep a lastSelected if you know the optionIndex to select   var optionIndex         this  0  options optionIndex  selected   true

User · Answer

You might need to use the   live  option in jQuery since the behavior will be evaluated in real-time based on the condition you ve set       my select   live  change   function ev      if my condition          ev preventDefault        return false

User · Answer

Implement custom readonly like eventHandler   lt select id  country  data-changeable false gt     lt option selected value  INDIA  gt India lt  option gt     lt option value  USA  gt United States lt  option gt     lt option value  UK  gt United Kingdom lt  option gt   lt  select gt    lt script gt      var lastSelected       country option selected             country   on  change   function            if    this  data changeable                 lastSelected attr  selected   true                                                   country   on  click   function            lastSelected       country option selected             lt  script gt    Demo   https   jsfiddle net 0mvajuay 8

User · Answer

if anybody still interested  this solved the problem  using jQuery 3 3 1  jQuery   class   each function i v        jQuery v  data  lastSelected   jQuery v  find  option selected   val         jQuery v  on  change   function         if  confirm  Are you sure                   var self   jQuery this           jQuery this  find  option   each function key  value              if parseInt jQuery value  val        parseInt self data  lastSelected                                 jQuery this  prop  selected    selected                                       jQuery v  data  lastSelected   jQuery v  find  option selected   val

User · Answer

This was the ONLY thing that worked for me  on Chrome Version 54 0 2840 27     x000D   x000D     select   each function     x000D      this  data  lastSelectedIndex   this selectedIndex   x000D      x000D     select   click function     x000D      this  data  lastSelectedIndex   this selectedIndex   x000D      x000D   x000D     select class   select-with-confirm     change function       x000D    if   confirm  Do you really want to change       x000D      this selectedIndex     this  data  lastSelectedIndex    x000D      x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   lt select id  fruits  class  select-with-confirm  gt  x000D     lt option selected value  apples  gt Apples lt  option gt  x000D     lt option value  bananas  gt Bananas lt  option gt  x000D     lt option value  melons  gt Melons lt  option gt  x000D   lt  select gt  x000D   x000D   lt select id  people  gt  x000D     lt option selected value  john  gt John lt  option gt  x000D     lt option value  jack  gt Jack lt  option gt  x000D     lt option value  jane  gt Jane lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

[javascript] jQuery prevent change for select

Examples related to javascript

Examples related to jquery

Examples related to events

Examples related to select