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

Question

这次我尝试制作一个代码，让用户选择 he/she 想去的位置。我已经写了 html 和 js 但是现在我被连接它们卡住了（大约半天......）。我在 bootstrap 的帮助下写了一个下拉菜单。我还写了一个 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 function" 放在各处。

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

<!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
}

谢谢！

Answer 1

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

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

并且在函数中这样接收它

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

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

Connecting bootstrap dropdown to object and loop with Javascript

html

javascript

loops

twitter-bootstrap

drop-down-menu