Question

我正在尝试建立一个可搜索的数据库，允许用户输入州名称，并查看该州法律的一小部分（交通法，同意年龄，隐瞒和携带法律等）。我对用户提交字符串将如何与我的Javascript对象进行交互感到困惑。我看到人们提交有关添加用户提交的整数或连接的问题，但我想要做的是略有不同。

我可以通过getElementById方法将用户提交的文本指定为变量，但现在我迷路了。我的问题是：如何在Javascript中将该用户提交的变量与我的对象的键值相关联，这样当用户键入“Minnesota”并单击“查找”按钮时，它将检索并显示我的Javascript数据（这是关于明尼苏达州的信息）法律存储为对象键）？

以下是有问题的 HTML 的子集：

<div class="formDiv">
<form id="searchbox" action="">
  <!--Search field-->
  <input id="search" type="text" placeholder="Ex: Minnesota"></input>
  <!--Submit button-->
  <input id="submit" type="submit" value="Search"></input>
</form>
</div>
<!--Where I want the Javascript object to be displayed-->
<div class="answer"><p></p></div>

这里是 Javascript ，为简单起见只有一个对象：

var Minnesota = {
  name: "Minnesota",
  consent: 18,
  openBottle: true,
  deathPen: false,
  conceal: "Conceal & Carry",
  txtDriveBan: true,
  talkDriveBan: false
}
$(document).ready(function() {
  $("#submit").on('click', function(){
  var State = document.getElementById("#search");
  //At this point, what do I write to display Minnesota's information stored in the object?//
  });
});

非常感谢您的帮助！

Answer 1

在这里，我为您实现了这个小提琴，我将如何处理您的需求。我更改了数据结构，以便状态名称是键...

http://jsfiddle.net/yc7w364t/

var stateData = {
    "minnesota" : {
      consent: 18,
      openBottle: true,
      deathPen: false,
      conceal: "Conceal & Carry",
      txtDriveBan: true,
      talkDriveBan: false
    }
}

Answer 2

对象中的键应该是状态的名称。然后你可以这样做：

var states = {
    "Minnesota": {
        consent: 18,
        openBottle: true,
        deathPen: false,
        conceal: "Conceal & Carry",
        txtDriveBan: true,
        talkDriveBan: false
    }
}

$(document).ready(function() {
$("#submit").on('click', function(e){
  e.preventDefault(); // Don't submit the form.
  var State = document.getElementById("#search");
  var answerString = '';
  for (var key in states[State]){
     answerString += '<p>' + key + ': ' + states[State][key] + '</p>';
  }
  $('#answer').html(answerString);
 });
});

请注意，您应该更改包含答案的div，以便id＆＃34;回答＆＃34;而不是class＆＃34;回答＆＃34;。

使用Javascript对象数据连接HTML按钮

2 个答案: