【问题标题】:HTML select value passed into Javascript var (then used to fetch JSON)传递给 Javascript var 的 HTML 选择值(然后用于获取 JSON)
【发布时间】:2016-11-27 11:36:10
【问题描述】:

我查看了许多其他堆栈问答,但无法到达让我的代码正常工作所需的位置。 我觉得我想做的很简单,显然不适合我。

我有 2 个选择部分,每个部分会产生所需的不同信息。

-first 是 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."}}}}}

【问题讨论】:

  • 此外,JSON 文件目前很小,因此虽然 if(input == option){code...} 等... 并不理想,因为我将获得 JSON 文件每个海湾和大西洋都有多达 40 多条鱼。

标签: javascript html json variables select


【解决方案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>

【讨论】:

  • 所以我已经修复了代码,每次我单击它执行的按钮,但随后它在控制台中显示:导航到 file:///Users//Desktop/portfolio1/oceanMeasure/ index.html?oceanVal=gulf&fishVal=snook 然后页面刷新,清空控制台,清空我们做的innerHTML,输出。
  • 在 HTML 中我需要让我的 成为
猜你喜欢
  • 1970-01-01
  • 2015-12-25
  • 1970-01-01
  • 2018-10-23
  • 2023-03-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多