variable=getDocumentById("something").value 丢失了我一半的数据？答案

【问题标题】：variable=getDocumentById("something").value losing half my data?variable=getDocumentById("something").value 丢失了我一半的数据？
【发布时间】：2017-05-19 05:51:20
【问题描述】：

我正在使用 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>

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

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

谢谢！

【问题讨论】：

引号很重要.... :)
我不明白您要做什么。使用常规 html 选择构建和清除选择实现了什么？
巫术... lunochkin，同时解决了两个问题！
steve - 使用输入框，您可以将所有选项放在一个位置，并在多个元素上使用它们。 -但是-由于自动完成，可以选择、写入或显示其他选项。（在这种情况下我无法关闭自动完成功能是有原因的）。使用 select，只有我的选项可用，但每次我创建一个新元素时，我都必须包含所有选项。这样我可以调用相同的函数并使用相同的数据，而无需编写 100 行代码

标签： javascript html

【解决方案1】：

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

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>

【讨论】：

它有效，但我不太了解语法。（毕竟我是菜鸟）我认为在此处加上引号会将预期输出更改为：这不起作用，因为在变量周围加上引号会将其变成简单的文本。这就是我来这里的原因 - 非常感谢！
bombs 不会被忽略，它被视为另一个没有价值的属性。
对，但是浏览器并没有做任何事情。

【解决方案2】：

您可以使用带有单引号的此类变体：

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

【讨论】：