如何使用JavaScript函数获取HTML值

Question

我想将选择菜单选项的值设置为JavaScript对象的值。

的HTML

<select id="eRedList">
    <option value=electroSeries.Li.potential>Li</option>
</select>

JS

var electroSeries = {
    Li: {name : "Li", charge : "1", potential : -3.05, redReaction : "Li+(aq) + e- >> Li(s)", oxReaction : "Li(s) >> Li+(aq) + e-"};
}

所以在这里，我想将与属性“ potential”关联的值转换为HTML值。 但是，当我尝试在文本框中显示此内容以查看得到的内容时，最终得到的是“ electroSeries.Li.potential”而不是数值。

我是JS的新手，所以我们将不胜感激！

Answer 1

HTML和js在没有外部库（例如angular）的情况下无法像您期望的那样进行交互。 您需要从javascript访问option元素并应用值：

var electroSeries = {
    Li: {name : "Li", charge : "1", potential : -3.05, 
         redReaction : "Li+(aq) + e- >> Li(s)", 
         oxReaction : "Li(s) >> Li+(aq) + e-"};
}
var select = document.getElementById('eRedList');
select.options[0].value = electroSeries.Li.potential;

编辑：基于评论的解决方案

 var electroSeries = { Li: { potential : -3.05 }, K: { potential : -2.92 }, Ca: { potential : -2.76 }, }; var select = document.getElementById('eRedList'); for(var i in electroSeries) { var option = document.createElement('option'); option.innerHTML = i; option.name = i; option.value = electroSeries[i].potential; select.appendChild(option); } 

 Element: <select id="eRedList"></select>