変数= getDocumentById（ "something"）。値がデータの半分を失っていますか？

Question

私は、フォーカスの選択ボックスをオートポピュレートするためにjavascriptを使用しています。そして、ボールドのinnerHTML（選択された値を除く）をクリアします（リストのサイズが大きくなるのを防ぐ）。

選択された値が2つの単語でない限り、すべてが期待どおりに機能します。たとえば、「Bath Bombs」。選択ボックスをもう一度クリックし、同じオプションを選択すると（リストの一番上に表示されます）、フィールドから「爆弾」という単語がドロップされます???

（また、私はそれを持っているようなコードで、縮小からフィールドを維持する方法はありますか？）

私が間違った場所誰かが私に教えていただけますか？ （ところで：私は非常に少ないjavascriptやHTMLを知っている - 私は最後の数日間で自分自身にこれを教えています）

<script> 
 
    
 
function prodType(id){ 
 
\t var targetId = id; 
 
\t var select = document.getElementById(targetId); 
 
\t var options = [ \t "", "Candles", "Tarts", "Bath Salts", "Bath Bombs", "Glycerin Soaps", "Salt Scrubs", "Sugar Scrubs", "Shower Gel", "Lotions"]; 
 
\t \t for(var i = 0; i < options.length; i++) { 
 
\t \t var opt = options[i]; 
 
\t \t var el = document.createElement("option"); 
 
\t \t \t el.textContent = opt; 
 
\t \t \t el.value = opt; 
 
\t \t \t select.appendChild(el); 
 
\t \t } 
 
\t } 
 

 
function clearAll(id) { 
 
\t var targetId = id; 
 
\t var select = document.getElementById(targetId); 
 
\t var svalue = select.value; 
 
\t select.innerHTML = "<option value="+svalue+">"+svalue+"</option>"; \t \t 
 
\t } 
 

 
</script> 
 

 
<select style="width:150" id="selectNumber" onfocus="prodType(this.id)" onblur="clearAll(this.id)"> 
 
\t <option value="" hidden>Product Type</option> 
 
</select>

あなたはこのコードを実行した場合...「2を選択「単語」オプションを選択し、選択ボックスをクリックしてから、今度は同じオプションを再度選択します。今回はリストの~~ THE TOP〜〜から選択します。

クリックすると、何が起きているかがわかります。

ありがとうございます！

Answer 1

問題は、オプション値を更新しているとき、それは本質的value=bath bombsとして設定されていますので、あなたが引用符を含めていないことです。 bombsは無視され、ちょうどvalue=bathになります。引用符（value='bath bombs'）を追加すると、期待どおりに動作します。

function prodType(id){ 
 
\t var targetId = id; 
 
\t var select = document.getElementById(targetId); 
 
\t var options = [ \t "", "Candles", "Tarts", "Bath Salts", "Bath Bombs", "Glycerin Soaps", "Salt Scrubs", "Sugar Scrubs", "Shower Gel", "Lotions"]; 
 
\t \t for(var i = 0; i < options.length; i++) { 
 
\t \t var opt = options[i]; 
 
\t \t var el = document.createElement("option"); 
 
\t \t \t el.textContent = opt; 
 
\t \t \t el.value = opt; 
 
\t \t \t select.appendChild(el); 
 
\t \t } 
 
\t } 
 

 
function clearAll(id) { 
 
\t var targetId = id; 
 
\t var select = document.getElementById(targetId); 
 
\t var svalue = select.value; 
 
\t select.innerHTML = "<option value='"+svalue+"'>"+svalue+"</option>"; \t \t 
 
\t }

<select style="width:150" id="selectNumber" onfocus="prodType(this.id)" onblur="clearAll(this.id)"> 
 
\t <option value="" hidden>Product Type</option> 
 
</select>

Answer 2

あなたは、単一引用符で、このようなバリアントを使用することができます。

select.innerHTML = "<option value='"+svalue+"'>"+svalue+"</option>";