<select><option> 的值作为字符串返回答案

【问题标题】：Value of <select><option> coming back as string<select><option> 的值作为字符串返回
【发布时间】：2016-07-31 14:26:25
【问题描述】：

有没有办法将<option> 的值设置为实际整数？我有以下html代码：

<select id="proteinperc" onchange="setMacrosProtein()">
      <option value="0" selected>0%</option>
      <option value="5">5%</option>
      <option value="10">10%</option>
      <option value="15">15%</option>
      <option value="20">20%</option>
      <option value="25">25%</option>
      <option value="30">30%</option>
      <option value="35">35%</option>
      <option value="40">40%(Rec.)</option>
      <option value="45">45%</option>
      <option value="50">50%</option>
      <option value="55">55%</option>
      <option value="60">60%</option>
      <option value="65">65%</option>
      <option value="70">70%</option>
      <option value="75">75%</option>
      <option value="80">80%</option>
      <option value="85">85%</option>
      <option value="90">90%</option>
      <option value="95">95%</option>
      <option value="100">100%</option>
    </select>

然后我有下面的脚本试图访问这些选项值并使用它们执行计算。问题是当我对它们进行任何计算时，我得到的只是字符串连接或奇怪的值。

function setMacrosProtein() {
myProtein = document.getElementById("proteinperc").value;
var removeValue = 101 - (myProtein+myFats+myCarbs);
alert(removeValue); // Alert here just for testing the first calculation.
var x = document.getElementById("fatperc").options.length;
for(i = 0; i < x; i++) {
    // Check fatperc
    if(document.getElementById("fatperc").options[i].value + myFats >= removeValue) {
        document.getElementById("fatperc").options[i].disabled = true;
    } else if(document.getElementById("fatperc").options[i].value + myFats < removeValue) {
                document.getElementById("fatperc").options[i].disabled = false;
            }
    // Check carbperc
    if(document.getElementById("carbperc").options[i].value+myCarbs >= removeValue) {
        document.getElementById("carbperc").options[i].disabled = true;
    } else if(document.getElementById("carbperc").options[i].value+myCarbs < removeValue) {
                document.getElementById("carbperc").options[i].disabled = false;
            }
}
//setCals();
}

如果无法从选项值返回整数，我确实有一个解决方法，但有一个小问题。我可以设置一个新数组，将值镜像到选项列表，即：array[0] 将等于 option[0]，我可以在 if 语句中检查数组。

但是，如何以这种方式将变量设置为当前选定的选项？如何在选项数组中引用当前选定选项的位置以获取新创建数组中的镜像位置？澄清一下，如果选择的选项当前是选项[4]，我如何引用它的位置然后拉数组[4]的值？

【问题讨论】：

在您的选择值周围使用 parseInt，例如 'parseInt(options[i].value)。那将是一个 int。

标签： select integer position option selected

【解决方案1】：

您可以像这样使用parseInt() 从中获取 int 值：

myProtein = parseInt(document.getElementById("proteinperc").value);

【讨论】：

【解决方案2】：

在javascript文件中尝试使用parseInt(...)。

【讨论】：

太棒了，这行得通。还在学习一些基本的 Javascript 功能，所以在这里和我一起裸露。我有另一个问题。我正在尝试引用一个需要从字符串转换为整数的选项值，但它是一个浮点数，并且在引用选项值（范围从 1.2 到 1.9）时一直返回为 1。
@ShaunL 那是因为 parseInt 将字符串解析为 int。还有parseFloat。

【解决方案3】：

使用一元运算符+。比parseInt() 更容易。只需在要转换为数字的内容前面加上一个加号即可。

例子：

<select id="movie">
  <option value="10">Casablanca ($10)</option>
  <option value="12">Rear Window ($12)</option>
  <option value="8">Vertigo ($8)</option>
  <option value="9">Rosemary's Baby ($9)</option>
</select>

const movieSelect = document.getElementById('movie');
const ticketPrice = +movieSelect.value;

【讨论】：