我已经查看了许多其他堆栈q＆amp; a's并且无法到达我需要的位置以使我的代码正常工作。 我觉得我想做的很简单，显然不适合我。
我有2个选择部分，每个部分都会产生所需的不同信息。
- 首先是oceanVal
- 第二个是fishVal
我希望用户选择的值然后被发送到我的javascript，以便在从JSON var文件中获取数据时用作以下过程中的变量，然后最终将其发送回oceanOutput中的HTML（谢谢为了你的帮助）。
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：
(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获取。 因此，如果你想看到它操作只是做提示，这就是我想要它做什么，但点击时使用我的表格。 我还没到达输出部分。
（不确定是否需要，但这是我的JSON - 我要缩小它。）
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."}}}}}
答案 0 :(得分：1)
您需要传递所选的选项值而不是对象
例如：
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>