Question

我正在使用javascript自动填充焦点上的选择框，然后在模糊处清除innerHTML（除了选定的值）（以防止列表越来越大）。

除非选择的值是两个单词，否则一切都按预期工作......例如：“浴缸炸弹”。如果我再次单击选择框并选择相同的选项（现在位于列表顶部），则会从字段中删除“炸弹”一词???

（同样，根据我所拥有的代码，是否有任何方法可以防止字段缩小？）

有人可以告诉我哪里出错了吗？（顺便说一下：我知道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>

如果您运行此代码...选择“双字”选项，请单击关闭选择框，然后再次选择相同的选项，这次是从列表的~~ THE TOP ~~。

当你点击关闭时，你会看到发生了什么。

谢谢！

Answer 1

问题在于，当您更新选项值时，您不会包含引号，因此它基本上被设置为value=bath bombs。 bombs会被忽略，您最终会得到value=bath。添加一些引号（value='bath bombs'），它将按预期工作。

＆＃13;

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>";		
	}

＆＃13;

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

＆＃13;

Answer 2

您可以将这种变体用于单引号：

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

variable = getDocumentById（“something”）。值丢失了一半我的数据？

2 个答案: