4

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

Reddy
  • 1,327
  • 3
  • 23
  • 44
  • What do you want to change? the values within it? – Marthin Jul 27 '11 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 Jul 27 '11 at 14:36
  • 1
    Please clarify the question. It's confusing what you're really asking. Maybe use some code to help explain. – Chris Snowden Jul 27 '11 at 14:36
  • 1
    Maybe you only want what this question answers http://stackoverflow.com/questions/292615/how-can-i-set-the-value-of-a-dropdownlist-using-jquery – Marthin Jul 27 '11 at 14:37

4 Answers4

3

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');
Brad Christie
  • 100,477
  • 16
  • 156
  • 200
2
$('#my_select').change(function(event){
    $(this).val(this.defaultSelected);
});
AlienWebguy
  • 76,997
  • 17
  • 122
  • 145
  • 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: http://jsbin.com/ulufer/edit – AlienWebguy Jul 27 '11 at 14:44
2

You 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);
});
Nicola Peluchetti
  • 76,206
  • 31
  • 145
  • 192
1

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"));
});
ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124