根据下拉列表和文本框访问弦乐变量

时间:2014-11-13 18:38:41

标签: javascript jquery

我正在尝试编写一个函数,允许我根据下拉和文本框访问某个“管道”。我设置它的方式是下拉列表的值可以匹配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">

1 个答案:

答案 0 :(得分:4)

好的,我在这里怎么做。首先,在你的对象中,我将分配一个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,所以我选择在这里使用它。)

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

小提琴: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(); });