javascript - 变量 = getElementById ("something").value 丢失一半数据？

Question

我正在使用 javascript 自动填充焦点上的选择框，然后在模糊时清除innerHTML(所选值除外)(以防止列表变得越来越大)。

一切都会按预期工作，除非选择的值是两个单词...例如:“Bath Bombs”。如果我再次单击选择框，并选择相同的选项(现在位于列表顶部)，它会从字段中删除“炸弹”一词？？？

(另外，根据我的代码，有什么办法可以防止字段缩小吗？)

有人可以告诉我哪里出了问题吗？(顺便说一句:我对 javascript 或 html 知之甚少 - 过去几天我一直在自学)

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

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

</script>

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

如果您运行此代码...选择一个“两个单词”选项，单击选择框，然后再次选择相同的选项，这次是从列表的~~顶部~~。

当您单击“关闭”时，您将看到发生了什么。

谢谢!

Answer 1

问题是，当您更新选项值时，您没有包含引号，因此它本质上被设置为 value=bathombs。 bombs 被忽略，最终得到 value=bath。添加一些引号 (value='bathombs')，它将按预期工作。

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

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

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