I'm using the following script which displays a pop-up error if a person has picked same values from multiple drop-downs. Works great, however after showing the pop-up, the duplicate selection still takes place. It should prevent this from happening.

$(document).ready(function () {
    $('select').change(function () {
        if ($('select option[value="' + $(this).val() + '"]:selected').length > 1) {
            alert('You have already selected this option previously - please choose another.')
        }
    });
});

jsfiddle example here

I'm using the following script which displays a pop-up error if a person has picked same values from multiple drop-downs. Works great, however after showing the pop-up, the duplicate selection still takes place. It should prevent this from happening.

$(document).ready(function () {
    $('select').change(function () {
        if ($('select option[value="' + $(this).val() + '"]:selected').length > 1) {
            alert('You have already selected this option previously - please choose another.')
        }
    });
});

jsfiddle example here

• javascript
• jquery

Share Improve this question Follow edited Sep 7, 2016 at 9:17 virs90 asked Sep 7, 2016 at 9:06 virs90virs90 14911 gold badge33 silver badges1212 bronze badges 5

• please, write some html example. – Vixed Commented Sep 7, 2016 at 9:08
• Possible duplicate of jQuery prevent change for select – Mike Scotty Commented Sep 7, 2016 at 9:08
• Check this, it might help you find a solution: stackoverflow./questions/4076770/… Once you are able to find previous value, you just have to change the select actual value for the previous value – Mayday Commented Sep 7, 2016 at 9:10
• Do you have a default option? – Zakaria Acharki Commented Sep 7, 2016 at 9:13
• jsfiddle/k10vcny2 – virs90 Commented Sep 7, 2016 at 9:18

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You could switch to the default option :

$(this).val('-1').change();

Hope this helps.

$(document).ready(function () {
  $('select').change(function () {
    if ($('select option[value="' + $(this).val() + '"]:selected').length > 1) {
      $(this).val('-1').change();
      alert('You have already selected this option previously - please choose another.')
    }
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option value='-1'>Choose an option</option>
  <option value='1'>option 1</option>
  <option value='2'>option 2</option>
  <option value='3'>option 3</option>
</select>

<select>
  <option value='-1'>Choose an option</option>
  <option value='4'>option 4</option>
  <option value='1'>option 1</option>
  <option value='5'>option 5</option>
</select>

One option is assign value 0 to force to select new value, something like this

jQuery(document).ready(function () {

    $('select').change(function () {

        if ($('select option[value="' + $(this).val() + '"]:selected').length > 1)
        {
            $(this).val(0);
            alert('You have already selected this pany - please choose another.')
        }
    });
});