无法使用javascript函数处理下拉列表

Question

I'm having problems getting my JavaScript to function correctly with my html. 我在使用html使JavaScript正常运行时遇到问题。 I need the "activity" drop-down box to work with the "city" drop-down box. 我需要“活动”下拉框才能使用“城市”下拉框。 For example, if I select "Brisbane" and then click the activity box, the options should be "City Tours, Sports, Cycling, Museums, Boating" and it will be different depending on which city that is selected. 例如，如果我选择“布里斯班”然后单击活动框，则选项应为“城市旅游，体育，自行车，博物馆，划船”，并且根据所选城市的不同而不同。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Reservations</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="travel.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <link rel="icon" href="travel.png">
  <style type="text/css">
    body{
      background-color: white;
    }

  </style>
</head>
<header>

  <img class="imageheader" src="travel.PNG" alt="megatravel" align="left" width="145" height="145">
  <div class="wrapper">
    <nav role="navigation">
      <h1><a href="travelindex.html">Mega Travel</a></h1>
      <ul class="nav-ul">
        <li><a href="travelindex.html">Home</a></li>
        <li><a href="aboutus.html">About Us</a></li>
        <li><a href="reservations.html">Reservations</a></li>
      </ul>
      <a href="aboutus.html"><a/>
       <a href="travelindex.html"><a/>
       </nav>
     </div>
   </header>

   <body>
    <div class="container">
     <div class="col-4">
      <h1><strong>Book a Reservation</strong></h1>
      <form action="contactform.php" method="post" id="reservationform">

        <div class="form-group">
          <label for="name">Name</label>
          <input type="text" id="name" class="form-control">
        </div>

        <div class="form-group">
          <label for="email">Email</label>
          <input type="text" id="email" class="form-control">
        </div>

        <div class="form-group">
          <label for="phone">Phone Number</label>
          <input type="text" name="phoneNum" id="phone" class="form-control">
        </div>

        <div class="form-group">
          <label for="adults">Adults</label>
          <input type="number" name="adultsNo" id="adults" class="form-control">
        </div>

        <div class="form-group">
          <label for="children">Children</label>
          <input type="number" name="children" id="children" class="form-control">
        </div>

        <div class="form-group">
          <label for="city">City</label>
          <select name="city" id="city"  style="width: 250px" onchange="activitiesSelect()" class="form-control">
            <option selected disabled>Select</option>
            <option value="Brisbane">Brisbane</option>
            <option value="Vancouver">Vancouver</option>
            <option value="New_York_City">New York City</option>
            <option value="Berlin">Berlin</option>
            <option value="Cancun">Cancun</option>
          </select>
        </div>

        <div class="form-group">
          <label for="activity">Activity</label>
          <select name="activity" id="activity" style="width: 250px" class="form-control">
            <option selected disabled>Select</option>
          </select>
        </div>

        <div class="form-group">
          <label for="traveldate">Travel Date</label>
          <input type="date" name="traveldate" id="traveldate" style="width: 250px" class="form-control">
        </div>

        <div class="form-group">
          <button type="submit" form="reservationform" value="Submit" style="width: 100px">Submit</button>
        </div>
      </form>

    </div>
  </div>
  <script src="megatravel.js"></script>
</body>
</html>

function myfunct() {
  var docHeight = (document.height !== undefined) ? document.height : document.body.offsetHeight;
  var cur_height=window.innerHeight;
  var total_height=docHeight-cur_height;
  alert(total_height/100);
//var amout=total_height/100;
}
{
  var Brisbane = ["City Tours","Sports","Cycling","Museums","Boating"];
  var Vancouver = ["Sailing","Beach","Hiking","Museums","Boating"];
  var New_York_City = ["Museums", "Theatre", "Parks and Recreation", "City Tours"];
  var Berlin = ["City Tours", "Museums", "Cycling"];
  var Cancun = ["Parks and Recreation", "Beaches", "Boating", "Snorkeling"];
}
function activitiesSelect(){
  var city=document.getElementById('city').value;
  $('#activity').find('option').remove().end().append('<option value="none" disabled selected>Select</option>').val('none');

  if(city=="Brisbane"){
    for(i=0;i<Brisbane.length;i++){
      var o = new Option(Brisbane[i], Brisbane[i]);
      $(o).html(Brisbane[i]);
      $("#activity").append(o);
    }
  }
  else if(city=="Vancouver"){
    for(i=0;i<Vancouver.length;i++){
      var o = new Option(Vancouver[i], Vancouver[i]);
      $(o).html(Vancouver[i]);
      $("#activity").append(o);
    }
  }else if(city=="New_York_City"){
    for(i=0;i<New_York_City.length;i++){
      var o = new Option(New_York_City[i], New_York_City[i]);
      $(o).html(New_York_City[i]);
      $("#activity").append(o);
    }
  }else if(city=="Berlin"){
    for(i=0;i<Berlin.length;i++){
      var o = new Option(Berlin[i], Berlin[i]);
      $(o).html(Berlin[i]);
      $("#activity").append(o);
    }
  }else if(city=="Cancun"){
    for(i=0;i<Cancun.length;i++){
      var o = new Option(Cancun[i], Cancun[i]);
      $(o).html(Cancun[i]);
      $("#activity").append(o);
    }
  }
}

Answer 1

Consider changing your JavaScript like so: 考虑更改您的JavaScript，如下所示：

const cities = {
  Brisbane: ["City Tours", "Sports", "Cycling", "Museums", "Boating"],
  Vancouver: ["Sailing", "Beach", "Hiking", "Museums", "Boating"],
  Berlin: ["City Tours", "Museums", "Cycling"],
  Cancun: ["Parks and Recreation", "Beaches", "Boating", "Snorkeling"]
};

function activitiesSelect(e) {
  const { value: city } = e.target;
  const values = cities[city];

  $("#activity")
    .find("option")
    .remove()
    .end()
    .append('<option value="none" disabled selected>Select</option>')
    .val("none");

  for (let i = 0; i < values.length; i++) {
    var o = new Option(values[i], values[i]);
    $(o).html(values[i]);
    $("#activity").append(o);
  }
}

document.getElementById("city").addEventListener("change", activitiesSelect);

Then remove the onchange handler from your select tag. 然后从select标记中删除onchange处理程序。

This keeps your JavaScript and HTML separated and using the cities object keeps you from having too many if...else statements. 这样可以保持JavaScript和HTML分离，并且使用cities对象可以避免使用过多的if ... else语句。

https://codesandbox.io/embed/m7q1kqq9j9?fontsize=14 https://codesandbox.io/embed/m7q1kqq9j9?fontsize=14

无法使用javascript函数处理下拉列表

问题描述

1 个解决方案

解决方案1
0 2019-04-19 21:25:19

无法使用javascript函数处理下拉列表

问题描述

1 个解决方案

解决方案1 0 2019-04-19 21:25:19

解决方案1
0 2019-04-19 21:25:19