根据下拉列表和文本框访问字符串变量 [英] Access a stringed variable based on a drop down and text box
问题描述
我正在尝试编写一个函数，该函数将允许我基于下拉列表和文本框访问某个管道".我设置它的方式是下拉列表的值可以匹配var automobiles中的字符串，然后以某种方式需要根据用户在文本框中输入的内容知道如何访问正确的权重.任何帮助，将不胜感激！有人可以帮忙吗?
I am trying to write a function that will allow me to access a certain "pipe" based on a drop down and text box. The way I have set it up is that the value of the drop down can match the string in var automobiles then somehow it would need to know how to access the correct weight based on what the user enters in the textbox. Any help with this would be greatly appreciated! Can someone please help?
http://jsfiddle.net/wb9z2uuw/1/
**也许类似于var exampleWeightClass = Automobiles["2D"].vehicleClass; ????怎么知道落入正确的vehicleClass?
** Maybe something like var exampleWeightClass = Automobiles["2D"].vehicleClass; ???? How would it know to fall into the correct 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数值属性，以便可以在循环中对其进行检查.
Ok, here's how I would do it. First, in your objects, I would assign a minWeight and maxWeight numeric property so it can be checked in the loop.
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，因此我选择在此处使用它).
Now, I assign a change event handler (I'm using jQuery, but you could use plain javascript if you like - I saw jQuery in the tag so I opted to use it here).
在事件处理程序中，循环遍历cars对象以查找在下拉列表中选择的值.然后遍历该类别内的对象数组，以查看输入的权重是否在为该对象分配的minWeight和maxWeight值之间.如果是这样，则返回该对象的管道值(我只是在示例中抛出警报)
In the event handler, loop through the automobiles object to find the value that's selected in the dropdown. Then loop through the array of objects within that category to see if the weight entered is between the minWeight and maxWeight values that are assigned for that object. If they are, then return the pipe value for that object (which I'm just throwing an alert for an example)
提琴: 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/
Pure JavaScript example as requested: 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(); });
这篇关于根据下拉列表和文本框访问字符串变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
