How can i restrict a dropdown list option change without disabling that dropdownlist.
Means i can not change the option and that dropdownlist should not be readonly.
My problem is my server is not reading disabled elements
-
What do you want to change? the values within it?Marthin– Marthin2011-07-27 14:35:41 +00:00Commented Jul 27, 2011 at 14:35
-
The more effort you put into your question, the better both the quality and quantity of the answers you'll receive. It's really very unclear what you're trying to do.T.J. Crowder– T.J. Crowder2011-07-27 14:36:00 +00:00Commented Jul 27, 2011 at 14:36
-
1Please clarify the question. It's confusing what you're really asking. Maybe use some code to help explain.Chris Snowden– Chris Snowden2011-07-27 14:36:42 +00:00Commented Jul 27, 2011 at 14:36
-
1Maybe you only want what this question answers stackoverflow.com/questions/292615/…Marthin– Marthin2011-07-27 14:37:18 +00:00Commented Jul 27, 2011 at 14:37
Add a comment
|
4 Answers
Here's my bid
jQuery
var lastSel = $('#foo').val();
$('#foo').change(function(){
var $select = $(this), $status = $('#status');
var $selOpt = $select.find('option:selected');
if (!$selOpt.hasClass('disabled')){
lastSel = $selOpt.index();
$status.text('Selection changed to ' + $selOpt.val() + ' [' + lastSel + ']');
}else{
$selOpt.removeAttr('selected');
$select.find('option:eq('+lastSel+')').attr('selected',true);
$status.text('Invalid selection, reverting to ' + lastSel);
}
});
HTML
<select id="foo">
<option value="">Please select one</option>
<option value="a">Option A</option>
<option value="b">Option B</option>
<option value="c" class="disabled">Option C</option>
<option value="d">Option D</option>
<option value="e">Option E</option>
<option value="f" class="disabled">Option F</option>
<option value="g">Option G</option>
<option value="h">Option H</option>
<option value="i" class="disabled">Option I</option>
</select>
<p id="status"></p>
Plug-in Version
(function($){
$.fn.extend({
restrictedSelect: function(disabledClass){
disabledClass = disabledClass || 'disabled';
return this.each(function(i,e){
var $s = $(e);
// store the current selection. This is also used as a fall-back
// value when the user selects something invalid.
$s.data('currentSelection',$s.find('option:selected').index());
$s.change(function(){
var $cs = $s.find('option:selected');
if ($cs.hasClass(disabledClass)){
$cs.removeAttr('selected');
$s.find('option:eq('+$s.data('currentSelection')+')').attr('selected',true);
}else{
$s.data('currentSelection',$cs.index());
}
});
});
}
});
})(jQuery);
$('select').restrictedSelect('invalid-select-option');
3 Comments
SeanCannon
Heh that's actually pretty cool, but why bother disabling it instead of just removing it from the menu? Why let the user select something only to tell them they weren't supposed to select it?
Brad Christie
@AlienWebguy: You can do that, too. Just the same, you can set
.disabled { display: none; }SeanCannon
Right, but then your jquery would serve no purpose :)
$('#my_select').change(function(event){
$(this).val(this.defaultSelected);
});
1 Comment
SeanCannon
You can override that to whatever value you want. If the previous value is stored in a variable somewhere, simply provide it in
$(this).val( -- here -- ) Example: jsbin.com/ulufer/editYou could do:
//save the value selected when you load the page
var default = $('#yourselect option:selected').val();
//reset the value when the select change
$('#yourselect').change(function(event){
$(this).val(default);
});
answered Jul 27, 2011 at 14:44
Nicola Peluchetti
77k32 gold badges150 silver badges197 bronze badges
Comments
Try this
<select id="selectId" data-default="1">
<option value="0">0</option>
<option value="1">1</option>
...
</select>
$('#selectId').change(function(){
$(this).val($(this).data("default"));
});
