I'm having problems getting my JavaScript to function correctly with my html. 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);
}
}
}
Nisharg Shah
20k12 gold badges70 silver badges78 bronze badges
-
Where have you called myfunct()Rohit Shetty– Rohit Shetty2019年04月19日 21:19:01 +00:00Commented Apr 19, 2019 at 21:19
-
provide working example in form of fiddle or penNisharg Shah– Nisharg Shah2019年04月19日 21:19:46 +00:00Commented Apr 19, 2019 at 21:19
-
your code seems to be working fine. What is the issueRohit Shetty– Rohit Shetty2019年04月19日 21:28:35 +00:00Commented Apr 19, 2019 at 21:28
1 Answer 1
Consider changing your JavaScript like so:
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.
This keeps your JavaScript and HTML separated and using the cities object keeps you from having too many if...else statements.
Sign up to request clarification or add additional context in comments.
Comments
default