传入Javascript var的HTML选择值（然后用于获取JSON） [英] HTML select value passed into Javascript var (then used to fetch JSON)
本文介绍了传入Javascript var的HTML选择值（然后用于获取JSON）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经查看了许多其他堆栈q& a's并且无法到达我需要的位置以使我的代码正常工作。
我觉得我想做的很简单，显然不适合我。
I have looked at many other stack q&a's and can't get to where I need to be to have my code work right. I feel what I am trying to do is simple, apparently not for me.
我有2个选择部分，每个部分都会产生所需的不同信息。
I have 2 select sections each yielding different info that is needed.
-first is oceanVal
-first is oceanVal
-second is fishVal
-second is fishVal
我希望用户选择的值然后被发送到我的javascript，以便在从JSON var文件中获取数据时用作以下过程中的变量，然后最终将其发送回oceanOutput中的HTML（谢谢你的帮助）。
I would like the value the user selects to then be sent to my javascript to be used as variables in the following process on fetching data from a JSON var file and then ultimately send it back to my HTML in the oceanOutput (thank you for your help).
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OceanMeasure</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Ocean Measure</h1>
<div>
<p>Where will you be fishing?</p>
<form>
<select name="oceanVal" id="oceanVal">
<option value="" disabled="disabled" selected="selected">Please select</option>
<option value="gulf">Gulf</option>
<option value="atlantic">Atlantic</option>
</select>
</div>
<div>
<p>What fish would you like to look up?</p>
<select name="fishVal" id="fishVal">
<option value="" disabled="disabled" selected="selected">Please select</option>
<option value="dolphin">Dolphin</option>
<option value="blackfin tuna">Blackfin Tuna</option>
<option value="snook">Snook</option>
</select>
</div>
<button>Get Info</button>
</form>
<div id="oceanOutput"></div>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/data.json"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
javascript：
javascript:
(function(){
// var userOcean = prompt("What ocean will you be fishing in?");
// var userFish = prompt("What fish would you like to look up?");
var userOcean = document.getElementById("oceanVal");
var userFish = document.getElementById("fishVal");
console.log(
"\n\nfish: "+jsonObject.ocean_measure[userOcean].fish[userFish].name+
"\n\nlength: "+jsonObject.ocean_measure[userOcean].fish[userFish].length+
"\n\nclosed: "+jsonObject.ocean_measure[userOcean].fish[userFish].closed+
"\n\nlimit: "+jsonObject.ocean_measure[userOcean].fish[userFish].limit+
"\n\nremarks: "+jsonObject.ocean_measure[userOcean].fish[userFish].remarks
);
})();
我的提示工作但不是我的html获取。
因此，如果你想看到它的操作只是做提示，这就是我想要它做什么，但点击时使用我的表格。
我尚未到达输出部分。
my prompts work but not my html gets. so if you want to see it operate just do the prompts and thats what I want it to do but with using my form when is clicked. and I haven't reached the output part yet.
（不确定是否需要，但这是我的JSON - 我要缩小它。）
(not sure if it's needed but here is my JSON -I'm going to minify it.)
JSON：
var jsonObject = {"ocean_measure":{"gulf":{"fish":{"dolphin":{"name":"Mahi-mahi","length":"none","limit":"10 per person or 60 per vessel whichever is less"},"blackfin tuna":{"name":"Blackfin Tuna","length":"not regulated","limit":"The default bag limit for all unregulated species is two fish or 100 pounds per day, whichever is more"},"snook":{"name":"Snook","length":"Not less than 28 inches total length (TL) or more than 33 inches TL","closed":"Dec. 1-end of February; May 1-Aug. 31","limit":"1 per harvester per day","remarks":"Snook permit required for harvest when saltwater license required. State regulations apply in federal waters. Illegal to buy or sell snook. Fish must remain in whole condition until landed ashore (heads, fins, and tails intact). Snatch hooks and spearing prohibited. Harvest prohibited by or with the use of any multiple hook in conjuction with live or dead bait."}}},"atlantic":{"fish":{"dolphin":{"name":"Mahi-mahi","length":"20 inches fork length","limit":"10 per person or 60 per vessel whichever is less"},"blackfin tuna":{"name":"Blackfin Tuna","length":"not Regulated","limit":"The default bag limit for all unregulated species is two fish or 100 pounds per day, whichever is more"},"snook":{"name":"Snook","length":"Not less than 28 inches total length (TL) or more than 32 inches TL","closed":"Dec. 15 to Jan. 31, June 1 to Aug. 31","limit":"1 per harvester per day","remarks":"Snook permit required for harvest when saltwater license required. State regulations apply in federal waters. Illegal to buy or sell snook. Fish must remain in whole condition until landed ashore (heads, fins, and tails intact). Snatch hooks and spearing prohibited. Harvest prohibited by or with the use of any multiple hook in conjuction with live or dead bait."}}}}}
推荐答案
您需要传递所选的选项值而不是对象
You need to pass the selected option value not the object
例如：
userOcean.options[userOcean.selectedIndex].value
(function(){
var jsonObject = {
"ocean_measure": {
"gulf": {
"fish": {
"dolphin": {
"name": "Mahi-mahi",
"length": "none",
"limit": "10 per person or 60 per vessel whichever is less"
},
"blackfin tuna": {
"name": "Blackfin Tuna",
"length": "not regulated",
"limit": "The default bag limit for all unregulated species is two fish or 100 pounds per day, whichever is more"
},
"snook": {
"name": "Snook",
"length": "Not less than 28 inches total length (TL) or more than 33 inches TL",
"closed": "Dec. 1-end of February; May 1-Aug. 31",
"limit": "1 per harvester per day",
"remarks": "Snook permit required for harvest when saltwater license required. State regulations apply in federal waters. Illegal to buy or sell snook. Fish must remain in whole condition until landed ashore (heads, fins, and tails intact). Snatch hooks and spearing prohibited. Harvest prohibited by or with the use of any multiple hook in conjuction with live or dead bait."
}
}
},
"atlantic": {
"fish": {
"dolphin": {
"name": "Mahi-mahi",
"length": "20 inches fork length",
"limit": "10 per person or 60 per vessel whichever is less"
},
"blackfin tuna": {
"name": "Blackfin Tuna",
"length": "not Regulated",
"limit": "The default bag limit for all unregulated species is two fish or 100 pounds per day, whichever is more"
},
"snook": {
"name": "Snook",
"length": "Not less than 28 inches total length (TL) or more than 32 inches TL",
"closed": "Dec. 15 to Jan. 31, June 1 to Aug. 31",
"limit": "1 per harvester per day",
"remarks": "Snook permit required for harvest when saltwater license required. State regulations apply in federal waters. Illegal to buy or sell snook. Fish must remain in whole condition until landed ashore (heads, fins, and tails intact). Snatch hooks and spearing prohibited. Harvest prohibited by or with the use of any multiple hook in conjuction with live or dead bait."
}
}
}
}
};
var userOcean = document.getElementById("oceanVal");
var userFish = document.getElementById("fishVal");
var buttonInfo = document.getElementById("getInfo");
var output = document.getElementById("oceanOutput");
buttonInfo.addEventListener('click', function() {
var ocean = userOcean.options[userOcean.selectedIndex].value;
var kind = userFish.options[userFish.selectedIndex].value;
output.innerHTML = "<h1>Info:</h1>"+
"<p>Name: "+jsonObject.ocean_measure[ocean]['fish'][kind].name+"</p>"+
"<p>Length: "+jsonObject.ocean_measure[ocean]['fish'][kind].length+"</p>"+
"<p>Limit: "+jsonObject.ocean_measure[ocean]['fish'][kind].limit+"</p>";
});
})();
<h1>Ocean Measure</h1>
<div>
<p>Where will you be fishing?</p>
<form>
<select name="oceanVal" id="oceanVal">
<option value="" disabled="disabled" selected="selected">Please select</option>
<option value="gulf">Gulf</option>
<option value="atlantic">Atlantic</option>
</select>
</div>
<div>
<p>What fish would you like to look up?</p>
<select name="fishVal" id="fishVal">
<option value="" disabled="disabled" selected="selected">Please select</option>
<option value="dolphin">Dolphin</option>
<option value="blackfin tuna">Blackfin Tuna</option>
<option value="snook">Snook</option>
</select>
</div>
<button id="getInfo">Get Info</button>
</form>
<div id="oceanOutput"></div>
这篇关于传入Javascript var的HTML选择值（然后用于获取JSON）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
