选择以数组为值的标签，如何使用 JavaScript 选择数组项 1 和项 2？答案

【问题标题】：Select tag with array as value, how to choose array item 1 vs item 2 using JavaScript?选择以数组为值的标签，如何使用 JavaScript 选择数组项 1 和项 2？
【发布时间】：2016-06-20 16:31:07
【问题描述】：

我有一个选择标签，其中的选项需要像这样分配两个值。

<select id="industry_churn" class="form-control">
                        <option value="0">Select a Value</option>
                        <option value="{.70, .05}">Salon/Barber</option>
                        <option value="{.95, .05}">Painting</option>
                    </select>

在 JavaScript 方面，我有以下函数可以进行多次计算：

function calculateAll() {
var averageJobs = +document.getElementById("averageJobs").value;
var jobValue = +document.getElementById("jobValue").value;
var yearsOpen = +document.getElementById("yearsOpen").value;
var industry_churn = +document.getElementById("industry_churn").value; /* array item 1 */
var recovery = +document.getElementById("industry_churn").value; /* array item 2 */

var inactive = (averageJobs * 50) * yearsOpen * industry_churn; /* Value 1 */
var missedRevenue = inactive * jobValue;
var jobsRecovered = (averageJobs * 50) * recovery * yearsOpen; /* Value 2 */
var revenueYear = jobsRecovered * jobValue;


document.getElementById("inactive").value = inactive;
document.getElementById("missedRevenue").value = missedRevenue;
document.getElementById("jobsRecovered").value = jobsRecovered;
document.getElementById("revenueYear").value = revenueYear;

}

变量missedRevenue需要从option标签中拉取item 1(industry_churn)，变量jobsRecovered需要拉取item 2（恢复） 来自选项标签。

如何让我的 JavaScript 从数组中提取值？

【问题讨论】：

您可以在任何元素上多次拥有相同的属性。您可能想改用自定义数据属性（例如data-val1 data-val2）。见developer.mozilla.org/en-US/docs/Web/Guide/HTML/…
只需用对象创建一个数组，val1/val2 是这些对象的属性:)
你不能有重复的属性。
一种选择是将值存储到逗号分隔的字符串中，然后将它们拆分为 JS 中的数组......或者只是将值存储为 JSON（如value="[0.7, 0.05]"），然后解析这些 JSON 字符串到数组。

标签： javascript html arrays forms

【解决方案1】：

如果您的value 属性的格式需要像这样（"{.70, .05}"），那么您可以使用match 将该值转换为数组：

var arr = document.getElementById("industry_churn").value.match(/[\d\.]+/g).map(Number);
var industry_churn = arr[0];
var recovery = arr[1];

但是，如果您可以控制将数据附加到 option 标记的方式，请考虑将值设置为 JSON 文本：

<select id="industry_churn" class="form-control">
    <option value="0">Select a Value</option>
    <option value="[0.70, 0.05]">Salon/Barber</option>
    <option value="[0.95, 0.05]">Painting</option>
</select>

然后：

var arr = JSON.parse(document.getElementById("industry_churn").value);
var industry_churn = arr[0];
var recovery = arr[1];

请注意，在 ES6 中，您可以使用解构赋值语法：

var [industry_churn,recovery]=JSON.parse(document.getElementById("industry_churn").value)

【讨论】：