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

Question

有什么方法可以将 <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();
}

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

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

Answer 1

您可以使用 parseInt() 从中获取 int 值，如下所示：

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

Answer 2

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

Answer 3

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

示例：

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

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

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

Value of <select><option> coming back as string

select

integer

position

option

selected