web-dev-qa-db-ja.com

条件に基づいて選択リストから値を削除する

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

<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を使用してこれを行うにはどうすればよいですか

javascripthtmlvalidation
19
Jåcob

Selectオブジェクトの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ライブラリを使用する方がはるかに簡単です。

31
Andrew

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

$("#selectBox option[value='option1']").remove();
9
Dumisani

純粋な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でテストされていない（誰かがそれを確認できる場合）...）

8
Luca Rainone

既に述べたように、オプションを削除すると、選択要素の長さが短くなります。 1つのオプションを削除するだけの場合、これは問題ではありませんが、いくつかのオプションを削除する場合は問題が発生する可能性があります。一部の人は、オプションを削除するときにインデックスを手動で減らすことを提案しました。私の意見では、forループ内でインデックスを手動で減らすことは良い考えではありません。これが、背後からすべてのオプションを反復処理するforループとは少し異なることを提案する理由です。

var selectElement = document.getElementById("selectId");

for (var i = selectElement.length - 1; i >= 0; i--){
  if (someCondition) {
    selectElement.remove(i);
  }
}

すべてのオプションを削除したい場合は、このようなことをすることができます。

var selectElement = document.getElementById("selectId");

while (selectElement.length > 0) {
  selectElement.remove(0);
}
3
Jason Saruulo

インデックス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 
            }
        }
    }
2
Amit Shah

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();
2
Filipe Melo

あるいは、getElementsByNameでこれを達成することもできます

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

そのため、「C」のオプション値のマッチングでは、リストから車を削除できます。

var selectobject = document.getElementsByName('val')[0];
for (var i=0; i<selectobject.length; i++){
if (selectobject.options[i].value == 'C' )
    selectobject.remove(i);
  }
1
user3724032

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

「Javascriptは要素に自殺をさせませんが、乳児殺しを許可します。」:)

これを試して、

 var element=document.getElementsByName(val))
 element.parentNode.removeChild(element.options[0]); // to remove first option
1
bipen
document.getElementById(this).innerHTML = '';

If-caseに入れてください。これは、ドキュメント内の現在のオブジェクトを確認し、何も置き換えないだけです。最初にリストをループする必要があります。もしそうなら、すでにそれをしていると思います。

1
Ms01

次を使用できます。

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);
}
1
Thariama

これはそれを行う必要があります

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

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

1
Jacob George
if(frm.product.value=="F"){
    var select = document.getElementsByName('val')[0];
    select.remove(0);
    select.remove(1);
}
1
karaxuna

すべてのオプションをクリアするにはen Important en FOR：remove（0）-Important：0

var select = document.getElementById("element_select");
var length = select.length;
for (i = 0; i < length; i++) {
     select.remove(0);
 //  or
 //  select.options[0] = null;
}
0
Alexander Rogan