HTMLからJavaScript配列項目を削除しますか？

私はこれまでに尋ねられたことは知っていますが、私のコードは機能しません。HTMLからJavaScript配列項目を削除しますか？

私の評価作業は、JavaScript配列のリストボックスに似たものを入力し、その値を削除することです。私のコードはうまくいくはずだと思ったが、それはできないだろう。

マークアップ：

var sel = document.getElementById('cars'); 
 
var carArray = ["Audi", "BMW", "Porsche"] 
 
for (var i = 0; i < carArray.length; i++) { 
 
    var listBox = document.createElement('option'); 
 
    listBox.innerHTML = carArray[i]; 
 
    listBox.value = carArray[i]; 
 
    sel.appendChild(listBox); 
 
} 
 

 
function deleteFunc() { 
 
    var selInd = document.getElementById("cars").selectedIndex; 
 
    carArray.splice(selInd - 1, selInd + 1); 
 
}

<form> 
 
    <select id="cars" multiple> 
 
    <option id="carBrand"></option> 
 
    </select> 
 
    <button onclick="deleteFunc()">Delete</button> 
 
</form>

出典

2016-06-01 Smithy

'select'入力を更新しますか？ – Rayon

@レイヨンはい、そうです。 – Smithy

1. step： 'type =" button "'を追加するだけでボタンのタイプを実際にボタンに変更します。それ以外の場合、フォームを送信してページをリロードする送信ボタンとして動作します。 – Andreas

remove()optionindex
.spliceを使用して削除される項目のindexとしてfirst argument期待及び第二の引数は、除去すべきnumber of elementsです。

var sel = document.getElementById('cars'); 
 
var carArray = ["Audi", "BMW", "Porsche"] 
 
for (var i = 0; i < carArray.length; i++) { 
 
    var listBox = document.createElement('option'); 
 
    listBox.innerHTML = carArray[i]; 
 
    listBox.value = carArray[i]; 
 
    sel.appendChild(listBox); 
 
} 
 

 
function deleteFunc() { 
 
    var selInd = document.getElementById("cars").selectedIndex; 
 
    if (selInd > -1) { 
 
    document.getElementById("cars").options[selInd].remove(); 
 
    carArray.splice(selInd, 1); 
 
    console.log(carArray); 
 
    } 
 
    return false; //to prevent from submission 
 
}

<form> 
 
    <select id="cars" multiple> 
 
    </select> 
 
    <button onclick="return deleteFunc()">Delete</button> 
 
</form>

出典

2016-06-01 07:41:23 Rayon

@Andreas、Updated ..ありがとうございました:) – Rayon

ヒープありがとう！私はスクリプトを実行し、それは走った。 'console.log（carArray）;は何をしますか？ – Smithy

[__'Console.log（） '__]（https://developer.mozilla.org/en/docs/Web/API/Console/log） – Rayon

あなたが誤ってスプライス方法を使用している、スプライスの最初の値は、選択した項目のインデックスである必要があり、2番目の値は、あなたがから取り外したいどのように多くの項目ですあなたの配列。

次の問題は、更新された配列値でリストを再配置していないことです。

最終的な問題は、ボタンをクリックしたときにフォームが送信されないようにするために、ボタンを一種のボタンにするのを忘れていたことです。

コードは次のようになります。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 

</head> 
<body onLoad="populateList()"> 
    <form> 
     <select id="cars" multiple> 
      <option id="carBrand"></option> 
     </select> 
     <button type="button" onclick="deleteFunc()">Delete</button> 
    </form> 
    <script> 
     var sel = document.getElementById('cars'); 
     var carArray= ["Audi", "BMW", "Porsche"] 


     function populateList() { 
      sel.innerHTML = ""; 
      for (var i = 0; i < carArray.length; i++) { 
       var listBox = document.createElement('option'); 
       listBox.innerHTML = carArray[i]; 
       listBox.value = carArray[i]; 
       sel.appendChild(listBox); 
      } 
     } 

     function deleteFunc() { 
      var selInd = sel.selectedIndex; 
      carArray.splice(selInd, 1); 
      console.log(carArray); 
      populateList();    
     } 
    </script> 
</body> 
</html>

スプライス機能hereについて読んでください。

出典

2016-06-01 07:45:22

HTMLからJavaScript配列項目を削除しますか？

答えて

関連する問題