How to prevent selection due to change?

Question

I want to exclude the possibility of selection when a particular condition is met without disconnecting the select element.

Answer 1

Try the following: JSBin Demo

<select id="mySelect" data-value="" onfocus="this.setAttribute('data-value', this.value);" onchange="this.value = this.getAttribute('data-value');"> 

Answer 2

 old_value = $('#select :selected').val(); $('#select').change(function() { if($(this).val() == 'option 3') {//your specific condition $('#select').val(old_value); } else { old_value = $('#select :selected').val(); } }); 

demo

Answer 3

You can hold the last modified value of select and reassign if you do not want to use to change the selection according to your condition.

Live demo

HTML

 <select id="select"> <option>1</option> <option>2</option> <option>3</option> </select>​ 

Javascript

 preval = $('#select').val(); $('#select').change(function() { if ($(this).val() == "2") { $(this).val(preval); return;} preval = ($(this).val(); });​ 

Answer 4

Example of what you want to do

 var select = $('select'), option = $('whatyouwanttotest'); if (option.val() == 'value') { select.attr('disabled', 'disabled'); } else { select.removeAttr('disabled'); } 

Answer 5

 (function () { var previousIndex; $("select[name=test]").focus(function () { // Store the current value on focus, before it changes previousIndex= this.selectedIndex; }).change(function(e) { e.target.selectedIndex = previousIndex; }); })();​ 

Here is a fiddle to try: http://jsfiddle.net/x5PKf/700/

Answer 6

Try the following: http://jsfiddle.net/Csamn/

 function selectIt() { $('#select option:eq(0)').attr('selected', 'selected'); } $('#select').change(function() { if ($(this).val() != "1") { setTimeout(function() { selectIt(); }, 0); } }); 

It will never let you choose anything other than 1. Checkout the fiddle.

Answer 7

You can dynamically apply a selection rule in a SELECT element.

For example, you can limit the selection to the currently selected value or limit the options that the user can select.

Check out the live demo :

HTML

 <select id="selectElement"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> <option value="5">Option 5</option> <option value="6">Option 6</option> <option value="7">Option 7</option> </select> <select id="restrictOptions"> <option value="">Do not restrict options</option> <option value="3,4,6,7">Restrict options to 1, 2 and 5</option> <option value="1,2,7">Restrict options to 3 to 6</option> <option value="other">Restrict to currently selected option</option> </select> 

Javascript

 function applySelectRule(selector, rule) { var el = $(selector); var currentValue = el.val(); var valuesRestricted = (rule == 'other' ? '' : rule).split(RegExp('\\s*,\\s*')); el.unbind('change.restrictedRule') // remove old binding .bind('change.restrictedRule', function() { if (rule == 'other') { if (el.val() != currentValue) el.val(currentValue); } }).find('option').each(function() { var opt = $(this); if (valuesRestricted.indexOf(opt.val()) == -1) { opt.removeAttr('disabled'); } else { opt.attr('disabled', true); } }).end().find('option[value="'+currentValue+'"]:disabled').each(function() { // set first value that is not disabled el.val(el.find('option:not(disabled)').text()); }); }; $('#restrictOptions').change(function() { applySelectRule('#selectElement', $(this).val()); });​ 

The code should be clear enough, however I can refine it if you need to.