如何防止选择被更改

how to prevent a select from being changed?

本文关键字：选择 何防止      更新时间：2023-09-26

我想在不禁用select元素的情况下，防止在满足特定条件时更改select。

试试这个：JSBin演示

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

想要做的示例

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

当您不想在您的条件下更改select时，您可以保留select的last更改值和reassign更改值。

实时演示

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

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

演示

(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/

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

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

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

查看现场演示：

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

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

相关文章：