38

私はページに以下を持っています

<select name="val" size="1" >
<option value="A">Apple</option>
<option value="C">Cars</option>
<option value="H">Honda</option>
<option value="F">Fiat</option>
<option value="I">Indigo</option>                    
</select>

特定の条件が真の場合、選択から特定の値を削除したいと思います。

例えば

if(frm.product.value=="F"){
  // remove Apple and Cars from the select list
}

JavaScriptを使用してこれを行うにはどうすればよいですか

4

19 に答える 19

55

次のように選択オブジェクトの ID を指定します。

<select id="mySelect" name="val" size="1" >
    <option value="A">Apple</option>
    <option value="C">Cars</option>
    <option value="H">Honda</option>
    <option value="F">Fiat</option>
    <option value="I">Indigo</option>                    
</select>

純粋な JavaScript で実行できます。

var selectobject = document.getElementById("mySelect");
for (var i=0; i<selectobject.length; i++) {
    if (selectobject.options[i].value == 'A')
        selectobject.remove(i);
}

しかし、他の回答が示唆するように、jQuery やその他の JS ライブラリを使用する方がはるかに簡単です。

于 2012-10-17T11:14:55.143 に答える
13

純粋なJavaScriptで

var condition = true; // your condition
if(condition) {
    var theSelect = document.getElementById('val');
    var options = theSelect.getElementsByTagName('OPTION');
    for(var i=0; i<options.length; i++) {
        if(options[i].innerHTML == 'Apple' || options[i].innerHTML == 'Cars') {
            theSelect.removeChild(options[i]);
            i--; // options have now less element, then decrease i
        }
    }
}

IEでテストされていません（誰かが確認できる場合...）

于 2012-10-17T11:18:41.353 に答える
12

ここでJQueryソリューションを確認してください

$("#selectBox option[value='option1']").remove();
于 2014-04-11T07:44:03.333 に答える
7

インデックス I は、最初の要素を削除するとすぐに変更されます。このコードは、wifi チャネル コンボ ボックスから値 52 ～ 140 を削除します。

obj = document.getElementById("id");
if (obj)
{
        var l = obj.length;
        for (var i=0; i < l; i++)
        {
            var channel = obj.options[i].value;

            if ( channel >= 52 &&  channel <= 140 )
            {
                obj.remove(i);
                i--;//after remove the length will decrease by 1 
            }
        }
    }
于 2016-03-28T08:04:14.410 に答える
4

JQueryを使用している場合は、次のようになります。

SELECTにIDを与える

<select name="val" size="1" id="val">
<option value="A">Apple</option>
<option value="C">Cars</option>
<option value="H">Honda</option>
<option value="F">Fiat</option>
<option value="I">Indigo</option>                    
</select>

$("#val option[value='A'],#val option[value='C']").remove();
于 2012-10-17T11:11:56.697 に答える
3

値による選択でオプションを削除するには（純粋なJSで）：

[...document.getElementById('val').options]
    .filter(o => o.value === 'A' || o.value === 'C')
    .forEach(o => o.remove());
于 2020-04-07T13:39:21.640 に答える
2

あなたは使用することができます：

if ( frm.product.value=="F" ){
    var $select_box = $('[name=val]');
    $select_box.find('[value=A],[value=C]').remove(); 
}

更新：選択ボックスをこれに少し変更した場合

<select name="val" size="1" >
  <option id="A" value="A">Apple</option>
  <option id="C" value="C">Cars</option>
  <option id="H" value="H">Honda</option>
  <option id="F" value="F">Fiat</option>
  <option id="I" value="I">Indigo</option>                    
</select>

非jQueryソリューションはこれになります

if ( frm.product.value=="F" ){
    var elem = document.getElementById('A');
    elem.parentNode.removeChild(elem);
    var elem = document.getElementById('C');
    elem.parentNode.removeChild(elem);
}
于 2012-10-17T11:09:43.760 に答える
2

その親に移動し、そこから JavaScript で削除する必要があります。

「Javascript は要素を自殺させませんが、子殺しは許可します」..:)

これを試して、

 var element=document.getElementsByName(val))
 element.parentNode.removeChild(element.options[0]); // to remove first option
于 2012-10-17T11:21:54.547 に答える
2 
if(frm.product.value=="F"){
    var select = document.getElementsByName('val')[0];
    select.remove(0);
    select.remove(1);
}
于 2012-10-17T11:13:17.687 に答える
2

これでできるはず

document.getElementsByName("val")[0].remove(0);
document.getElementsByName("val")[0].remove(0);

ここでフィドルを確認してください

于 2012-10-17T11:28:51.830 に答える
1 
document.getElementById(this).innerHTML = '';

if-caseの中に入れてください。ドキュメント内の現在のオブジェクトをチェックし、それを何も置き換えないだけです。あなたは最初にリストをループしすぎるでしょう、あなたがそれを持っているのであなたはすでにそれをしていると私は推測しています。

于 2012-10-17T11:09:02.927 に答える
-1

オプションの削除

$("#val option[value='A']").remove();
于 2012-10-17T11:09:32.863 に答える