如何限制下拉列表更改而不禁用它

Question

如何在不禁用该下拉列表的情况下限制下拉列表选项更改 意味着我无法更改选项，并且该下拉列表不应该是只读的 我的问题是我的服务器没有读取禁用的元素

Answer 1

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>

---

插件版本

(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');

Answer 2

$('#my_select').change(function(event){
    $(this).val(this.defaultSelected);
});

Answer 3

你可以这样做：

//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);
});

Answer 4

试试这个

<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"));
});