将引导下拉列表连接到对象并使用Javascript循环

这次我试图制作一个代码，让用户选择他/她想去的位置。我已经写了html和js，但现在我被卡住了（大约半天......）通过连接它们。我已经在引导的帮助下编写了一个下拉菜单。我还编写了一个 js 文件，它应该循环这些位置。最后，它应该了解用户选择了什么，然后输出结果，结果应该是：

var text = '<p>' + buses[i].to + '<br> - Distance from Estonia: ' + buses[i].distance + ' km <br> - Price: ' + buses[i].price + ' euros <br>'

在网络浏览器中，像这样：

阿姆斯特丹

距离爱沙尼亚：2000公里
价格：250欧元

但是无论我尝试什么，都没有效果（我知道这是因为我的知识很差，我不怪 JS）。我试图在任何地方放置"id"和"onclick功能"。

所以，我会粘贴其中的一小部分，也许有人可以帮助:)

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>Buses</h2> 
<p id="test1">...</p>
<p id="test2">...</p>
<script src="js/buses.js"></script>

<!-- Dropdown menu for beautiful usage -->
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" id="dropdownMenu2" type="button">
    List of locations
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <ul id="boss">
      <li><a role="button" onclick="bus()" value="Amsterdam">">Amsterdam</a></li>
      <li><a role="button" onclick="bus()" value="Madrid">Madrid</a></li>
      <li><a role="button" onclick="bus()" value="Stockholm">Stockholm</a></li>
      <li><a role="button" onclick="bus()" value="Riga">Riga</a></li>  
    </ul>
  </div>
</div>
</body>
</html>

还有我的 JS 文件：

// If person is in some location
document.getElementById("test2").innerHTML = "<hr> You're in Estonia, where would You want to travel?";
function bus() {
// Object with info     
    var buses = [
  { to: 'Amsterdam', distance: 2000, price: 250},
  { to: 'Madrid', distance: 4500, price: 350},
  { to: 'Stockholm', distance: 1500, price: 90},
  { to: 'Riga', distance: 400, price: 100}
  ];
// Should get result which user has choosen
    var res = document.getElementById("boss");
    var result = res.value;
    console.log(value); // outputs html row... >.>
// Loop through the object
    var text = "";
    for(var i = 0; i < (buses.length); i++) {   
    if (result == buses[i].to) { text = '<p>' + buses[i].to + '<br> - Distance from Estonia: ' + buses[i].distance + ' km <br> - Price: ' + buses[i].price + ' euros <br>';
    alert("Works!!!!"); // Well, last thing is to change it to output "var text" result
    }
    };
    document.getElementById("test2").innerHTML = text; // If everything is correct, this should output sentence about selected bus
}

谢谢！

在 onclick 函数本身中传递城市的值

<li><a role="button" onclick="bus('Amsterdam')">Amsterdam</a></li>

并在函数中像这样接收它

function bus(value) {
var result=value;
}

相关内容

最新更新

热门标签：