基于下拉列表和文本框访问带字符串的变量

Access a stringed variable based on a drop down and text box

本文关键字：字符串 变量 访问 下拉列表 文本      更新时间：2023-09-26

我正在尝试编写一个函数，该函数将允许我基于下拉列表和文本框访问某个"管道"。我设置它的方式是，下拉列表的值可以与var automobiles中的字符串匹配，然后它需要知道如何根据用户在文本框中输入的内容访问正确的权重。如有任何帮助，我们将不胜感激！有人能帮忙吗？

http://jsfiddle.net/wb9z2uuw/1/

**也许是var exampleWeightClass = Automobiles["2D"].vehicleClass;之类的东西？？？？它怎么会知道落入正确的vehicleClass？

var Automobiles = {
    "2D": [{
        vehicleClass: "0 to 2499",
        pipe: [14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 29.00, 29.00, 29.00, 1, 27.60, 14.50, 1, 3, 01, 01]
    }, {
        vehicleClass: "2500 to 3499",
        pipe: [22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 45.00, 45.00, 45.00, 1, 35.60, 22.50, 1, 3, 01, 01]
    }, {
        vehicleClass: "3500 and up",
        pipe: [32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 65.00, 65.00, 65.00, 1, 45.60, 32.50, 1, 3, 01, 01]
    }],
    "3D": [{
        vehicleClass: "0 to 2499",
        pipe: [14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 29.00, 29.00, 29.00, 1, 27.60, 14.50, 1, 3, 01, 01]
    }, {
        vehicleClass: "2500 to 3499",
        pipe: [22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 45.00, 45.00, 45.00, 1, 35.60, 22.50, 1, 3, 01, 01]
    }, {
        vehicleClass: "3500 and up",
        pipe: [32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 65.00, 65.00, 65.00, 1, 45.60, 32.50, 1, 3, 01, 01]
    }]
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select name="vehiclebody" id="vehiclebody">
<option value="">Choose a Vehicle</option>
    <option value="2D">2-Door Coupe</option>
    <option value="3D">3-Door Hatchback</option>
</select>
<label for="ew">Empty Weight:</label>
         <input type="text" name="ew" id="ew">

好的，下面是我的方法。首先，在你的对象中，我会分配一个minWeight和maxWeight数字属性，这样它就可以在循环中检查了。

var Automobiles = {
    "2D": [{
        vehicleClass: "0 to 2499",
        minWeight: 0,
        maxWeight: 2500,
        pipe: [14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 29.00, 29.00, 29.00, 1, 27.60, 14.50, 1, 3, 01, 01]
    }, {
        vehicleClass: "2500 to 3499",
        minWeight: 2500,
        maxWeight: 3500,
        pipe: [22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 45.00, 45.00, 45.00, 1, 35.60, 22.50, 1, 3, 01, 01]
    }, {
        vehicleClass: "3500 and up",
        minWeight: 3500,
        maxWeight: Number.MAX_VALUE,
        pipe: [32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 65.00, 65.00, 65.00, 1, 45.60, 32.50, 1, 3, 01, 01]
    }],
    "3D": [{
        vehicleClass: "0 to 2499",
        minWeight: 0,
        maxWeight: 2500,
        pipe: [14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 14.50, 29.00, 29.00, 29.00, 1, 27.60, 14.50, 1, 3, 01, 01]
    }, {
        vehicleClass: "2500 to 3499",
        minWeight: 2500,
        maxWeight: 3500,
        pipe: [22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 22.50, 45.00, 45.00, 45.00, 1, 35.60, 22.50, 1, 3, 01, 01]
    }, {
        vehicleClass: "3500 and up",
        minWeight: 3500,
        maxWeight: Number.MAX_VALUE,
        pipe: [32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 32.50, 65.00, 65.00, 65.00, 1, 45.60, 32.50, 1, 3, 01, 01]
    }]
};

现在，我分配了一个更改事件处理程序（我使用的是jQuery，但如果你愿意，你可以使用纯javascript——我在标记中看到了jQuery，所以我选择在这里使用它）。

在事件处理程序中，循环遍历automobiles对象以查找在下拉列表中选择的值。然后在该类别中的对象数组中循环，查看输入的权重是否在为该对象指定的minWeight和maxWeight值之间。如果是，那么返回该对象的管道值（我只是举个例子发出警报）

Fiddle：http://jsfiddle.net/wb9z2uuw/2/

$("#ew, vehiclebody").change(function () {
    if ($("#ew").val() !== "" && $("#vehiclebody :selected").val() !== "") {
        for (var i in Automobiles) {
            if (i === $("#vehiclebody :selected").val()) {
                for (var a = 0; a < Automobiles[i].length; a++) {
                    if ($("#ew").val() >= Automobiles[i][a].minWeight && $("#ew").val() < Automobiles[i][a].maxWeight) {
                        alert(Automobiles[i][a].pipe);
                        break;
                    }
                }
                break;
            }
        }
    }

编辑

请求的纯JavaScript示例：http://jsfiddle.net/wb9z2uuw/4/

var ew = document.getElementById("ew");
var vehiclebody = document.getElementById("vehiclebody");
var eventHandler = function () {
    if (ew.value !== "" && vehiclebody.options[vehiclebody.selectedIndex].value != "") {
        for (var i in Automobiles) {
            if (i === vehiclebody.options[vehiclebody.selectedIndex].value) {
                for (var a = 0; a < Automobiles[i].length; a++) {
                    if (ew.value >= Automobiles[i][a].minWeight && ew.value < Automobiles[i][a].maxWeight) {
                        alert(Automobiles[i][a].pipe);
                        break;
                    }                        
                }
                break;
            }
        }
    }
};
ew.addEventListener("change", function () { eventHandler(); });
vehiclebody.addEventListener("change", function () { eventHandler(); });
相关文章：