Question

我希望在不禁用select元素的情况下阻止在满足特定条件时更改选择。

Answer 1

试试这个：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

如果您不想在条件下更改选择，则可以保留last更改的select和reassign值。

<强> 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

您想要做什么的示例

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

这是一个小提琴：http://jsfiddle.net/x5PKf/700/

Answer 6

试试这个： http://jsfiddle.net/Csamn/

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

});

永远不会让您选择1. Checkout the fiddle.

以外的其他选项

Answer 7

您可以在SELECT元素上动态应用某些选择规则。

例如，您可以将选择限制为当前选定的值，或者您可以限制用户可以选择的选项。

查看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());
});

代码应该足够清楚，但是如果需要我可以澄清它。

如何防止选择被更改？

7 个答案:

HTML

的JavaScript