javascript - 選択が変更されないようにするにはどうすればよいですか？

Question

select要素を無効にせずに、特定の条件が満たされたときにselectが変更されないようにしたい。

Answer 1

これを試してください：JSBinデモ

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

デモ

Answer 3

条件に応じてselectの変更値を使用したくない場合はlast、selectの変更値を保持することができます。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();    
});​

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。

たとえば、選択を現在選択されている値に制限したり、ユーザーが選択できるオプションを制限したりできます。

ライブデモをチェックしてください：

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

コードは十分に明確である必要がありますが、必要に応じて明確にすることができます。