2017-04-01 10 views
2

Javasciptを使用して選択アプリケーションを作成しようとしています。私はインターネット上でこのコードについて知る必要があり、分割メソッドを使用して値と.innerHTMLを返します。今、splitメソッドを使い、.innerHTMLで値を持たないhtml要素に戻したいのであれば、このコードで使用されているforループを使って行う方法は?Javascript - 分割方法を削除する

<!DOCTYPE html> 
<html> 
<head> 
    <title>Select Options</title> 
</head> 
<body> 

<h2>Choose your car</h2> 
<hr> 

Choose Car Make: 
<select id="slct1" onchange="populate(this.id,'slct2')"> 
    <option value=""></option> 
    <option value="Hyundai">Hyundai</option> 
    <option value="Honda">Honda</option> 
    <option value="Maruti">Maruti</option> 
</select> 

<hr> 

Choose Car Model 
<select id="slct2" ></select> 

</body> 

<script type="text/javascript"> 
    function populate(s1,s2){ 
     var s1 = document.getElementById(s1); 
     var s2 = document.getElementById(s2); 
     s2.innerHTML = ""; 

     if(s1.value == "Hyundai") { 
      var optionArray = ["|", "i10|i10","i20|i20", "Verna|Verna"] 
     } 
     for(var option in optionArray){ 
      var pair = optionArray[option].split("|"); 
      var newOption = document.createElement('option'); 
      newOption.value = pair[0]; 
      newOption.innerHTML = pair[1]; 
      s2.options.add(newOption); 
     } 
    } 
</script> 

</html> 
+1

ので、splitメソッドを使用していませんか? innerHTMLを設定するだけです... – epascarello

答えて

1

あなたは、アレイ上for... inループを使用して、実際にあなたの要素を返さないことに、注意する必要がありますが、そのインデックス。単純なforループを使用することをお勧めします。

function populate(s1, s2) { 
 
    var s1 = document.getElementById(s1); 
 
    var s2 = document.getElementById(s2); 
 
    s2.innerHTML = ""; 
 
    
 
    var optionArray = ["i10", "i20", "Verna"]; 
 
    
 
    for (var i = 0; i < optionArray.length; i++) { 
 
    var newOption = document.createElement('option'); 
 
    newOption.value = optionArray[i]; 
 
    newOption.innerHTML = optionArray[i]; 
 
    s2.appendChild(newOption); 
 
    } 
 
}
<h2>Choose your car</h2> 
 
<hr> Choose Car Make: 
 
<select id="slct1" onchange="populate('slct1','slct2')"> 
 
    <option value=""></option> 
 
    <option value="Hyundai">Hyundai</option> 
 
    <option value="Honda">Honda</option> 
 
    <option value="Maruti">Maruti</option> 
 
</select> 
 

 
<hr> Choose Car Model 
 
<select id="slct2"></select>

+0

ありがとう!私はコードを得た –

1

削除したり、単にコメント数行は、あなたが欲しいものを行う必要があります(あなたが将来的にそれを必要とするかもしれない):上記のコードでは

<script type="text/javascript"> 
    function populate(s1,s2){ 
     var s1 = document.getElementById(s1); 
     var s2 = document.getElementById(s2); 
     s2.innerHTML = ""; 

     if(s1.value == "Hyundai") { 
      var optionArray = ["|", "i10|i10","i20|i20", "Verna|Verna"] 
     } 
     for(var option in optionArray){ 
      var pair = optionArray[option]; //.split("|"); 
      var newOption = document.createElement('option'); 
      newOption.value = pair; //[0]; 
      newOption.innerHTML = pair; //[1]; 
      s2.options.add(newOption); 
     } 
    } 
</script> 

、あなたは何.split()を使用していて、ちょうど全体を割り当てますオブジェクトを新しい要素に追加します。

+0

ありがとうございました。私はコードを取得し、それは本当にうまく動作します。あなたの時間のためにありがとうございました –

+0

上記の答えがあなたを助けたら。あなたは受け入れられた答えとしてそれを選択したいかもしれません。 –

+0

さて、もう助けが必要です。 –

1

値を""にすると、値は空のままです。

for(var option in optionArray){ 
    var text = optionArray[option]; 
    var newOption = document.createElement('option'); 
    newOption.value = ""; 
    newOption.innerHTML = text; 
    s2.options.add(newOption, null); 
} 
+0

提案バッドのためのありがとう!私はあなたの時間を感謝します –

関連する問題