state city dropdown not working - html

I found country state city dropdown code online. But i just wanted state and city. so made some changes, bt its not working properly, this is the edited code, please tell me whts wrong with it?
thanks.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">
<html>
<font face="Arial,Helvetica,Geneva,Swiss,SunSans-Regular">
<head>
<!--start head-->
<title>State - City Dropdown</title>
<script type="text/javascript">
// State lists
var cities = new Array();
cities['Gujarat'] = new Array('Ahmedabad','Vadodara','Surat');
cities['Rajasthan'] = new Array('Jaisalmer','Chittod','Jaipur');
cities['maharashtra'] = new Array('Mumbai','Pune','Nasik');
// City lists
function setcities() {
stateSel = document.getElementById('state');
cityList = cities[stateSel.value];
changeSelect('city', cityList, cityList);
}
function changeSelect(fieldID, newOptions, newValues) {
selectField = document.getElementById(fieldID);
selectField.options.length = 0;
for (i=0; i<newOptions.length; i++) {
selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
setcities();
});
</script>
<fieldset style="width: 300px;">
<legend><strong>Make your selection</strong></legend>
<p>
<!-- <form name="test" method="POST" action="processingpage.php"> -->
<form>
<table>
<tr>
<td style="text-align: left;">States:</td>
<td style="text-align: left;">
<select name="State" id="State" onChange="setcities();">
<option value="Gujarat">Gujarat</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Maharashtra">Maharashtra</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">City:</td>
<td style="text-align: left;">
<select name="City" id="city" onChange="setcities();">
<option value="">Please select a City </option>
</select>
</td>
</tr>
</table>
</form>
</fieldset>
</font></body></html>


javaScript attributes are Case Sensitive
You have Used state for State and maharashtra for Maharashtra Correct it or
Use the following Code,
<!--start head-->
<title>State - City Dropdown</title>
<script type="text/javascript">
// State lists
var cities = new Array();
cities['Gujarat'] = new Array('Ahmedabad','Vadodara','Surat');
cities['Rajasthan'] = new Array('Jaisalmer','Chittod','Jaipur');
cities['Maharashtra'] = new Array('Mumbai','Pune','Nasik');
// City lists
function setcities() {
stateSel = document.getElementById('State');
cityList = cities[stateSel.value];
changeSelect('city', cityList, cityList);
}
function changeSelect(fieldID, newOptions, newValues) {
selectField = document.getElementById(fieldID);
selectField.options.length = 0;
for (i=0; i<newOptions.length; i++) {
selectField.options[selectField.length] = new Option(newOptions[i], newValues[i]);
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
setcities();
});
</script>
<fieldset style="width: 300px;">
<legend><strong>Make your selection</strong></legend>
<p>
<!-- <form name="test" method="POST" action="processingpage.php"> -->
<form>
<table>
<tr>
<td style="text-align: left;">States:</td>
<td style="text-align: left;">
<select name="State" id="State" onChange="setcities();">
<option value="Gujarat">Gujarat</option>
<option value="Rajasthan">Rajasthan</option>
<option value="Maharashtra">Maharashtra</option>
</select>
</td>
</tr><tr>
<td style="text-align: left;">City:</td>
<td style="text-align: left;">
<select name="City" id="city" onChange="setcities();">
<option value="">Please select a City </option>
</select>
</td>
</tr>
</table>
</form>
</fieldset>
</font></body></html>


The html component you declared is with id as 'State' but you reading for 'state'. Best practice will be using jQuery in the project. jQuery will take care of the cross browser issues and will be handy while coding.


Change the id state to State and change cities['maharashtra'] to cities['Maharashtra']
Try this code:
DEMO
function setcities() {
var stateSel = document.getElementById("State");
console.log(stateSel);
cityList = cities[stateSel.value];
changeSelect('city', cityList, cityList);
}

Related

Show data only when it matches a search

I have a search with filter that narrows down data as expected. I would like to implement the functionality of hiding all the data by default, and only show results when they match a search. At the moment if nothing is typed everything is shown. The list will be very long once all data will be added, hence the request. Many thanks.
$(document).ready(function(){
$("#search-box").on("keyup", function() {
var value = $(this).val().toLowerCase();
var filter = $('#search-filter').val().toLowerCase();
if(filter == "listitem") {
$(".listitem").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
} else {
$(".td-"+filter).filter(function() {
$(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
}
});
$('#search-filter').on("change",function(){
var value = $("#search-box").val().toLowerCase();
var filter = $(this).val().toLowerCase();
if(filter == "listitem") {
$(".listitem").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
} else {
$(".td-"+filter).filter(function() {
$(this).parent().toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="input-group">
<div class="input-group-append">
<select id="search-filter" name="search-filter">
<!--<option value="listitem">All</option>-->
<option value="" disabled selected>Search by</option>
<option value="name">Name</option>
<option value="surname">Surname</option>
</select>
</div>
<input id="search-box" type="text" name="search" placeholder="Type here..." required="required"/>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
</tr>
</thead>
<tbody>
<tr class="listitem">
<td class="td-name">Jane</td>
<td class="td-surname">Doe</td>
</tr>
<tr class="listitem">
<td class="td-name">Dela</td>
<td class="td-surname">Cruz</td>
</tr>
</tbody>
</table>
</div>

Start by hiding everything. Then use an if statement to test if the search value is not empty, and show the matching elements.
I've also pulled the filtering code out into a named function, so we don't have to repeat it in both event listeners.
.filter() shouldn't be used to execute operations on each element, that should be done with .each(). But in this case you can use it to return a new collection that's just the matching elements, and you can then show them all together.
function filter_items(value, filter) {
$(".listitem, thead").hide();
if (value != '') {
if (filter == "listitem") {
$(".listitem").filter(function() {
return $(this).text().toLowerCase().includes(value)
}).show();
} else {
$(".td-" + filter).filter(function() {
return $(this).text().toLowerCase().includes(value)
}).closest(".listitem").show();
}
if ($(".listitem:visible").length > 0) {
$("thead").show();
}
}
}
$(document).ready(function() {
$("#search-box").on("keyup", function() {
var value = $(this).val().toLowerCase();
var filter = $('#search-filter').val().toLowerCase();
filter_items(value, filter);
});
$('#search-filter').on("change", function() {
var value = $("#search-box").val().toLowerCase();
var filter = $(this).val().toLowerCase();
filter_items(value, filter);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="input-group">
<div class="input-group-append">
<select id="search-filter" name="search-filter">
<!--<option value="listitem">All</option>-->
<option value="" disabled selected>Search by</option>
<option value="name">Name</option>
<option value="surname">Surname</option>
</select>
</div>
<input id="search-box" type="text" name="search" placeholder="Type here..." required="required" />
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
</tr>
</thead>
<tbody>
<tr class="listitem">
<td class="td-name">Jane</td>
<td class="td-surname">Doe</td>
</tr>
<tr class="listitem">
<td class="td-name">Dela</td>
<td class="td-surname">Cruz</td>
</tr>
</tbody>
</table>
</div>

How to redirect submit to parent window using Wix Iframe?

Hi can anyone assist me with what I need to do to get the url associated with the submit button to open in the parent window?
I am using the Wix html editor to add the code but for some reason upon submitting the returnURL only displays inside the Iframe and does not direct the url to the entire window?
Any assistance would be MAJORLY appreciated!
<input type='text' style='display:none;' name='returnURL'
value='https://www.MYURL.co.uk/' > </input>
<!-- Do not remove this code. -->
<style>
#crmWebToEntityForm tr , #crmWebToEntityForm td {
padding-left:0px;
padding-right:0px;
border-spacing:0px;
border-width:0px;
}
</style>
<table style='width:260px;background-color:#3a3b3f;background-color:ffffff;color:black'>
<tr></tr>
<tr>
<td style='width:100%;'><input type='text' placeholder="First Name" maxlength='40'
style='width:260px; height:50' name='First Name'></input></td>
<td style='width: 100%;'></td></tr><tr><td style='width:260px;'>
<input type='text'placeholder="Last Name" maxlength='80' style='width:100%; height:50'
name='Last Name'></input></td><td style='width: 260px;'></td></tr>
<tr>
<td style='width:100%;'><input type='text' placeholder="Phone Number" maxlength='30'
style='width:260px; height:50' name='Phone'></input></td>
<td style='width: 100%;'></td></tr><tr><td style='width:100%;'><input type='text'
placeholder="Email Address" maxlength='100' style='width:260px; height:50' name='Email'>
</input></td>
<td style='width: 100%;'></td></tr><tr><tr style='display:none;' ><td style='width:260px'>
<select style='width:260px;box-sizing:border-box;' name='Lead Source'>
<option value='-None-'>-None-</option>
<option value='Advertisement'>Advertisement</option>
<option value='Cold Call'>Cold Call</option>
<option value='Employee Referral'>Employee Referral</option>
<option value='External Referral'>External Referral</option>
<option value='Partner'>Partner</option>
<option value='Public Relations'>Public Relations</option>
<option value='Trade Show'>Trade Show</option>
<option selected value='Web Form'>Web Form</option>
<option value='Search Engine'>Search Engine</option>
<option value='Facebook'>Facebook</option>
<option value='Twitter'>Twitter</option>
<option value='Online Store'>Online Store</option>
<option value='Seminar Partner'>Seminar Partner</option>
<option value='Web Download'>Web Download</option>
</select></td><td style='width: 100%;'></td></tr><tr><tr style='display:none;' ><td
style='width:100%;' ><input type='text' style='width:100%;box-sizing:border-box;'
maxlength='255' name='LEADCF1' value='ContractorPeople'></input></td><td style='width:
260px;'></td></tr>
<tr><td style='width:100%;'><textarea maxlength='32000' style='width:100%; height:80'
name='Description'style='width:260px;box-sizing:border-box;'> </textarea></td>
<tr><td colspan='2' style='text-align:left;padding-top:15px;font-size:16px;'>
<button id="formssubmit">SUBMIT QUERY</button><style type="text/css" type="submit"
action="https://www.thecontractorpeople.co.uk" >
#formssubmit {
background-color: #3a3b3f;
padding: .5em;
-moz-border-radius: 5;
-webkit-border-radius: 5px;
border-radius: 6px;
color: #ffffff;
font-family: 'Avenir';
font-size: 18px;
text-decoration: none;
border:color:#ffffff;
}
#formssubmit:hover {
border: none;
background: #9799A4;
box-shadow: 0px 0px 1px #ffffff;
}
#formssubmit {
float: left;
margin-left:
margin-bottom:4px;
</style> <script>
var mndFileds=new Array('Last Name');
var fldLangVal=new Array('Last Name');
var name='';
var email='';
function checkMandatory204987000000227471() {
for(i=0;i<mndFileds.length;i++) {
var fieldObj=document.forms['WebToLeads204987000000227471'][mndFileds[i]];
if(fieldObj) {
if (((fieldObj.value).replace(/^\s+|\s+$/g, '')).length==0) {
if(fieldObj.type =='file')
{
alert('Please select a file to upload.');
fieldObj.focus();
return false;
}
alert(fldLangVal[i] +' cannot be empty.');
fieldObj.focus();
return false;
} else if(fieldObj.nodeName=='SELECT') {
if(fieldObj.options[fieldObj.selectedIndex].value=='-None-') {
alert(fldLangVal[i] +' cannot be none.');
fieldObj.focus();
return false;
}
} else if(fieldObj.type =='checkbox'){
if(fieldObj.checked == false){
alert('Please accept '+fldLangVal[i]);
fieldObj.focus();
return false;
}
}
try {
if(fieldObj.name == 'Last Name') {
name = fieldObj.value;
}
} catch (e) {}
}
}
document.getElementById('formsubmit').disabled=true;
}
}
</script>
</form>
</div>

You need to post the URL to the parent page using the HTML component's onMessage function (https://www.wix.com/corvid/reference/$w.HtmlComponent.html#onMessage)
Then on your page have a event listener for when the HTML component sends a message, then grab the url from it and redirect it using wixLocation.to()
export function html1_message(event) {
let url = event.data;
wixLocation.to(`${url}`);
}

How to use a bootrap class as well as a CSS class

How can I use 2 different classes? I have 2 HTML option fields when the user selects repair or another in the first one. Then the second must appear. But also its need a bootstrap class: form-control.
<script>
$(function() {
$("#correctiemaatregelen").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === 'Other') {
$("#leveranciers").removeClass("hidden");
document.getElementById("leveranciers");
}
else if (select_val === 'Repair') {
$("#leveranciers").removeClass("hidden");
document.getElementById("leveranciers");
}
else {
$("#leveranciers").addClass("hidden");
$("#leveranciers").val("");
}
});
});
</script>
Correctie maatregelen:<br>
<select name="correctiemaatregelen" class="form-control" id="correctiemaatregelen" style="width: 300px">
<option value="--Correctie maatregel--">--Correctie maatregel--</option>
<option value="Use">Use</option>
<option value="Repair">Repair</option>
<option value="Return">Return</option>
<option value="Other">Other</option>
</select>
<br>
<select name="leveranciers" id="leveranciers" class="form-control hidden" style="width: 300px">
<?php while ($row4 = mysqli_fetch_assoc($result4)):; ?>
<option value="<?php echo $row4['statusname'];?>"><?php echo $row4['statusname'];?></option>
<?php endwhile;?>
</select>
Is there somebody that can help me with this (simple) problem?

Couldn't you just add another class to the element? If this causes problems you have to overwrite some Bootstrap styles with your own class
$(function() {
$("#correctiemaatregelen").on("change", function() {
var select_val = $(this).val();
console.log(select_val);
if (select_val === "Other") {
$("#leveranciers").removeClass("hidden");
document.getElementById("leveranciers");
}
else if (select_val === "Repair") {
$("#leveranciers").removeClass("hidden");
$('#leveranciers').addClass("YOUR_CUSTOM_CLASS");
}
else {
$("#leveranciers").addClass("hidden");
$("#leveranciers").val("");
}
});
});
<select name="leveranciers" id="leveranciers" class="form-control YOUR_CUSTOM_CLASS hidden" style="width: 300px">
<?php while ($row4 = mysqli_fetch_assoc($result4)):; ?>
<option value="<?php echo $row4['statusname'];?>"><?php echo $row4['statusname'];?></option>
<?php endwhile;?>
</select>

How to create dynamic scope variables in Angularjs?

I want create the screen like this.
The select dropdowns and input fields should not effect on each other (right now if I select company, that is showing as selected in the next set, it should not like that). How can I implement this?
'use strict';
angular.module('newmonthlyplanning.controllers', [])
.controller('newmonthlyplanningCtrl', ['$scope','$window', '$state', 'serviceFactory', '$compile', '$interval','targetPlanningService',
function ($scope,$window,$state, serviceFactory, $compile,$interval,targetPlanningService) {
$scope.status = '200';
$scope.months = ['Jan','Feb','Mar','Apr','May','June','July','Aug','Sep','Oct','Nov','Dec'];
$scope.getAllSectors = function(){
targetPlanningService.getAllsectors().then(function (response) {
$scope.status = response.status;
console.log(response);
if (response.status === 200) {
$scope.sectors = response.data.sector_list;
}
else {
}
}, function (response) {
console.log(response);
if (response.status === 401) {
$state.go('login');
}
});
};
$scope.getcustomers = function(sector){
console.log("selected sector ",sector);
targetPlanningService.getAllCustomers(sector).then(function (response) {
$scope.status = response.status;
console.log(response);
if (response.status === 200) {
$scope.customers = response.data.customer_list;
}
else {
}
}, function (response) {
console.log(response);
if (response.status === 401) {
$state.go('login');
}
});
};
$scope.targetDetails = [];
$scope.getAllCompanies = function(){
targetPlanningService.getAllCompanies().then(function (response) {
$scope.status = response.status;
console.log("companies---> ",response);
if (response.status === 200) {
$scope.companies = response.data.companies;
$scope.targetDetails.push({'companies':$scope.companies,'sectors': $scope.sectors ,'customers': $scope.customers ,'targetss': $scope.targets});
}
else {
}
}, function (response) {
console.log(response);
if (response.status === 401) {
$state.go('login');
}
});
};
$scope.getAllproductIds = function(){
/* var details = {
'company' : $scope.targetDetails.company,
'sector' : $scope.targetDetails.sector
}
console.log("details--->",details);*/
console.log("$scope.targetDetails.company--->",$scope.targetDetails.company);
targetPlanningService.getAllproductIds($scope.targetDetails.company).then(function (response) {
$scope.status = response.status;
console.log("product_ids--->",response);
if (response.status === 200) {
$scope.productids = response.data.item_list;
}
else
{
}
}, function (response) {
console.log(response);
if (response.status === 401) {
$state.go('login');
}
});
};
$scope.targets = [{'pid': '','week1': '', 'week2': '','week3':'','week4':''}];
var i=1;
$scope.addNewChoice = function(id) {
$scope.targetDetails;
i++;
$scope.targets.push({'pid': '','week1': '', 'week2': '','week3':'','week4':''});
};
$scope.removeChoice = function(val) {
console.log("index------>",val);
$scope.targets.splice(val,1);
};
//$scope.targetDetails = [];
console.log("companies at targetDetails------>",$scope.companies);
var i =0;
$scope.addorder = function(){
var object = {};
object['targetss'] = $scope.targets;
// $scope.targetDetails.push({'companies':$scope.companies,'sectors': $scope.sectors ,'customers': '','targetss': $scope.targets});
$scope.targetDetails.push(object);
};
$scope.init = function () {
console.log("present state...",$state.current.name);
if($state.current.name==="monthly"){
$scope.getAllSectors();
// $scope.getnumberOfweeks();
$scope.getAllCompanies();
// $scope.getTargetDetails();
//$scope.getCommentDetails();
}
};
$scope.init();
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding: 0px" ng-repeat="details in targetDetails">
<div class="row">
<table class="table table-bordered">
<thead>
<tr>
<th>Company</th>
<th>Sector</th>
<th>Customer</th>
</tr>
</thead>
<tbody>
<tr >
<td>
<div>
<select class="form-control" data-ng-model="targetDetails.company" ng-change="getAllproductIds()" style="border: 1px solid skyblue;">
<option value="">Select Company</option>
<option ng-repeat="company in details.companies track by $index" value="{{company}}" >{{company}}</option>
</select>
</div>
</td>
<td >
<div >
<select class="form-control" data-ng-model="targetDetails.sector" ng-change="getcustomers(targetDetails.sector)" style="border: 1px solid skyblue;">
<option value="">Select Sector</option>
<option ng-repeat=" sector in details.sectors track by $index" value="{{sector}}">{{sector}}</option>
</select>
</div>
</td>
<td>
<div >
<select class="form-control" data-ng-model="targetDetails.customer" style="border: 1px solid skyblue;">
<option value="Customer"> Customer</option>
<option ng-repeat=" customer in details.customers track by $index" value="{{customer}}">{{customer}}</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="row" style="padding: 0px">
<table class="table table-bordered">
<thead>
<tr>
<th>Product Id</th>
<th >WEEK1</th>
<th >WEEK2</th>
<th >WEEK3</th>
<th >WEEK4</th>
<!-- <th>Total</th> -->
<!-- <th>Status</th> -->
<th >Action</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="target in details.targetss">
<td align="center" >
<select class="form-control" style="width: 120px;border: 1px solid skyblue;" data-ng-model="target.pid" ng-change="getUnitsofProduct(target.pid)">
<option value="">Select pid</option>
<option data-ng-repeat="pid in productids">{{pid}}</option>
</select>
</td>
<td align="center">
<input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week1">
</td>
<td align="center">
<input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week2">
</td>
<td align="center">
<input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week3">
</td>
<td align="center">
<input class="form-control" style="width: 70px" type="text" name="" ng-model="target.week4">
</td>
<!-- <td align="center" >
{{ (target.week1 * 1) + (target.week2 * 1)+ (target.week3 * 1)+ (target.week4 *1)+ (target.week5 *1) }} {{target.uom}}
</td> -->
<!-- <td ng-if="target.status==''"></td>
<td ng-if="target.status==='Pending'"><span style="color: blue">{{target.status}}</span></td>
<td ng-if="target.status==='Rejected'"><span style="color: red">{{target.status}}</span></td>
<td ng-if="target.status==='Accepted'"><span style="color: green">{{target.status}}</span></td> -->
<td align="center">
<button class="add" style="background-color: #008CBA;" data-ng-show="$last" data-ng-click="addNewChoice($parent.$index)">+</button>
<button class="sub" data-ng-click="removeChoice($index)" style="background-color:#f44336;margin:0px;">-</button>
</td>
<td>{{$parent.$index}}</td>
</tr>
</tbody>
</table>
<br>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="padding: 0px">
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" >
<button data-ng-click="addorder()" style=" padding: 5px;margin: 0px">Add Order</button>
</div>
</div>
</div>

You can use $index for the purpose.
For example:
<select class="form-control" data-ng-model="targetDetails.company[$index]" ng-change="getAllproductIds()" style="border: 1px solid skyblue;">
<option value="">Select Company</option>
<option ng-repeat="company in details.companies track by $index" value="{{company}}" >{{company}}</option>
</select>
Use in ng-model:
data-ng-model = "targetDetails.company[$index]"
Hope this helps.

How to add a class to a div on a certain option value

I was wondering how to add a class to a div if the option has the value selected. For example I'm making a website for my cousin's business, we want an easy way to shuffle through menus.
<code>
<div id="select"><form>
Menu:
<select name="select" class="form-control">
<option value="drinks">Drinks</option>
<option value="breakfast">Breakfast</option>
</select>
<input type="submit" value="Submit">
</form>
</code>
I would like if the value is breakfast to hide the div drinks and show the div breakfast, and also have it reversible. Thank you here's my code on JSFiddle http://jsfiddle.net/t5R9s/

Here it is
$(document).ready(function() {
$(".form-control").change(function() {
if($(this).val() == "drinks") {
$("#drinks").show();
$("#breakfast").hide();
} else {
$("#drinks").hide();
$("#breakfast").show();
}
});
});
Here is the FIDDLE.

You can use javascript. Do you want to do it when you hit submit or just after you make the selection?
[
Fiddle
]
<script type="text/javascript">
function changeClass(){
var myVariable = document.getElementById('control').value;
if(myVariable == "drinks"){
document.getElementById('drinks').className = "";
document.getElementById('breakfast').className = "hide";
}
else if(myVariable == "breakfast"){
document.getElementById('drinks').className = "hide";
document.getElementById('breakfast').className = "";
}
}
</script>
<div id="select">
<form>Menu:
<select name="select" class="form-control" id="control" onChange="changeClass()">
<option value="drinks">Drinks</option>
<option value="breakfast">Breakfast</option>
</select>
</form>
</div>
<div id="drinks">
<h2 align="center">Drinks</h2>
<table width="888" border="" cellpadding="9" class="">..</table>
</div>
<!--Breakfast table-->
<div id="breakfast" class="hide">
<h2 align="center">Breakfast</h2>
<table width="888" border="" cellpadding="9" class="">..</table>
</div>