web-dev-qa-db-ja.com

JavaScriptの値に基づいて<select>の<option>を無効にするにはどうすればよいですか？

<select>がいくつかあり、<option>がいくつかあります。それぞれに一意の値があります。所定の定義値（innerhtmlではない）で<option>を無効にする必要があります。

誰もがどのようにアイデアを持っていますか？

javascripthtmlselect
41
David

純粋なJavascript

純粋なJavascriptを使用すると、各オプションを順に切り替えて、その値を個別に確認する必要があります。

// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
  // lowercase comparison for case-insensitivity
  (op[i].value.toLowerCase() == "stackoverflow") 
    ? op[i].disabled = true 
    : op[i].disabled = false ;
}

非ターゲット要素を有効にしない場合：

// Get all options within <select id='foo'>...</select>
var op = document.getElementById("foo").getElementsByTagName("option");
for (var i = 0; i < op.length; i++) {
  // lowercase comparison for case-insensitivity
  if (op[i].value.toLowerCase() == "stackoverflow") {
    op[i].disabled = true;
  }
}

jQuery

JQueryを使用すると、1行でこれを実行できます。

$("option[value='stackoverflow']")
  .attr("disabled", "disabled")
  .siblings().removeAttr("disabled");

非ターゲット要素を有効にしない場合：

$("option[value='stackoverflow']").attr("disabled", "disabled");

----これはではない大文字と小文字を区別しないことに注意してください。 「StackOverflow」は「stackoverflow」と等しくなりません。大文字と小文字を区別しない一致を取得するには、それぞれを循環して値を小文字に変換し、それに対してチェックする必要があります。

$("option").each(function(){
  if ($(this).val().toLowerCase() == "stackoverflow") {
    $(this).attr("disabled", "disabled").siblings().removeAttr("disabled");
  }
});

非ターゲット要素を有効にしない場合：

$("option").each(function(){
  if ($(this).val().toLowerCase() == "stackoverflow") {
    $(this).attr("disabled", "disabled");
  }
});
75
Sampson

Idをオプションに設定してから、idによるget要素を使用し、x値が選択されたら無効にします。

例

<body>
      <select class="pull-right text-muted small" 
                 name="driveCapacity" id=driveCapacity onchange="checkRPM()">
      <option value="4000.0" id="4000">4TB</option>
      <option value="900.0" id="900">900GB</option>
      <option value="300.0" id ="300">300GB</option>
    </select>
    </body>
<script>
var perfType = document.getElementById("driveRPM").value;
if(perfType == "7200"){         
        document.getElementById("driveCapacity").value = "4000.0";
        document.getElementById("4000").disabled = false;           
    }else{          
        document.getElementById("4000").disabled = true;            
    }    
</script>
3
Patricio Zambrano
var vals = new Array( 2, 3, 5, 8 );
select_disable_options('add_reklamaciq_reason',vals);
select_disable_options('add_reklamaciq_reason');

function select_disable_options(selectid,vals){
  var selected = false ;
  $('#'+selectid+' option').removeAttr('selected');
  $('#'+selectid+' option').each(function(i,elem){
       var elid = parseInt($(elem).attr('value'));
       if(vals){
           if(vals.indexOf(elid) != -1){
               $(elem).removeAttr('disabled');
               if(selected == false){
                   $(elem).attr('selected','selected');
                   selected = true ; 
               }
           }else{
               $(elem).attr('disabled','disabled'); 
           }
       }else{
            $(elem).removeAttr('disabled');
       }
  });   
}

ここでJQで..誰かがそれを検索する場合

1
Айдън Бейтулов

また、特定の定義済みの値（<option>）でnot innerhtmlを無効にするというアイデアもお伝えしたいと思います。最も簡単な方法を得るには、jQueryを使用することをお勧めします。以下のサンプルをご覧ください。

[〜＃〜] html [〜＃〜]

Status:  
<div id="option">
   <select class="status">
      <option value="hand" selected>Hand</option>
      <option value="simple">Typed</option>
      <option value="printed">Printed</option>
   </select>
</div>

Javascript

ここでの考え方は、現在のPrintedがStatusであるときにHandオプションを無効にする方法です

var status = $('#option').find('.status');//to get current the selected value
var op = status.find('option');//to get the elements for disable attribute
(status.val() == 'hand')? op[2].disabled = true: op[2].disabled = false;

ここでどのように機能するかを見ることができます：

https://jsfiddle.net/chetabahana/f7ejxhnk/28/

0
Chetabahana

何らかの理由で、他の答えは不必要に複雑です。純粋なJavaScriptで1行で簡単に実行できます。

Array.prototype.find.call(selectElement.options, o => o.value === optionValue).disabled = true;

または

selectElement.querySelector('option[value="'+optionValue.replace(/["\\]/g, '\\$&')+'"]').disabled = true;

パフォーマンスは、オプションの数（オプションが多いほど、最初のオプションは遅くなります）と エスケープ （replace呼び出し）を2番目のオプションから省略できるかどうかに依存します。また、最初のものはArray.findおよびIE11で利用できない矢印関数を使用します。

0
user