Member Avatar for Sydney123

Hi there,

I have X as the value selected in a drop down
To X I want to link and display the below value defined in the following arrays.
Does anyone know how to link this code to the X value resulting for the drop down selection ?

<script type="text/javascript">


var colour_shop= new Array (); 

colour_shop["Colour Shop A"] = "4 usd";
colour_shop["Colour Shop B"] = "7 usd"; 
colour_shop["Colour Shop C"] = "12 usd";


document.write("<table border=\"1\" cellpadding=\"5\">");
document.write("<tr><th>Product</th><th>Price</th></tr>");

( var transfer in colour_shop)   document.write( "<tr><td>" + Product + "</td><td>" + colour_shop[Product] + "</td></tr>"); 

document.write ("</table>");

</script>
  • 2 Contributors
  • 5 Replies
  • 74 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by ivan3510
Member Avatar for ivan3510

You mean you have something like this:

<select>
<option value="1">Colour Shop A</option>
<option value="2">Colour Shop B</option>
<option value="3">Colour Shop C</option>
</select>

?

Member Avatar for Sydney123

This is a 3 dependant drop down box selection, below is the code I have for the last drop down box

<script>
var M_HK = [ 'Select Colour|', 'X|X', 'Y|Y'];
var ArrInfo = [];

function SetArrayInfo(Arr) {
ArrInfo = [];
switch (Arr) {


// Movies
case "M_HK" : ArrInfo = M_HK; break;
</td><td>
<select id="Movie" onchange="SBoxSetup('',this.value)">
<script type="text/javascript"> SBoxSetup('Movie','') </script>
</select>
</td></tr>
Member Avatar for ivan3510

I still don't understand it, but nevermind. Here's code:

<select ... onchange="function_name(this.options[this.selectedIndex].value);">
<option selected="yes" disabled>Choose...</option>
<option value="first">this is first option</option>
</select>
//and here's function:
function function_name(option_value){
//variable 'option_value' is 'first'
}
Member Avatar for Sydney123

Hi Ivan
Sorry to make it unclear .
Below is the full code ( drop down and other data relevant to the project )
So the third drop down "Area" for the zone "AreaA11" I would like to attach ( on click on Get a quote Button ) the value of 4, 6 and 8 GBP to display in the Table Arrays
In the same drop down for the zone " Area A21 " there would be another set of 3 values
and so on for each area ..
( I need to get rid of the function summary but I am working on this )


I am a bit lost with the suggestion you made, could you help ?

<html>
<head>
<title> City Cinema Selections </title>

<script type="text/javascript">

var Cities = [ 'Select Country|',
'CountyA|C_CountryA', 'CountryB|C_CountryB', 
'CountryC|C_CountryC', 'CountryD|C_CountryD']; // Note: no comma on final entry

var C_CountryA = [ 'Select City|', 'CityA1|M_HK', 'CityA2|M_Sa'];
var C_CountryB = [ 'Select City|', 'CityB1|M_NM', 'CityB2|M_Ch'];
var C_CountryC = [ 'Select City|', 'CityC1|M_SL', 'CityC2|M_Ba'];
var C_CountryD = [ 'Select City|', 'CityD1|M_Kr', 'CityD2|M_OM'];

// Update _Movie values as they change
var M_HK = [ 'Select Area|', 'AreaA11|AreaA11', 'AreaA21|AreaA21'];
var M_Sa = [ 'Select Area|', 'AreaA21|AreaA21', 'AreaA22|AreaA22'];
var M_NM = [ 'Select Area|', 'AreaB11|AreaB11', 'AreaB21|AreaB21'];
var M_Ch = [ 'Select Area|', 'AreaB21|AreaB21', 'AreaB22|AreaB22'];
var M_SL = [ 'Select Area|', 'AreaC11|AreaC11', 'AreaC21|AreaC21'];
var M_Ba = [ 'Select Area|', 'AreaC21|AreaC21', 'AreaC22|AreaC22'];
var M_Kr = [ 'Select Area|', 'AreaD11|AreaD11', 'AreaD21|AreaD21'];
var M_OM = [ 'Select Area|', 'AreaD21|AreaD21', 'AreaD22|AreaD22'];

var BEN= new Array (); 

BEN["Ticket Type 1"] = "4.00 GBP";
BEN["Ticket Type 2"] = "6.00 GBP"; 
BEN["Ticket Type 3"] = "8.00 GBP";


document.write("<table border=\"1\" cellpadding=\"5\">");
document.write("<tr><th>Cine</th><th>Price</th></tr>");
for ( var Cine in BEN) //print the values into a table cell for each iteration
  document.write( "<tr><td>" + Cine + "</td><td>" + BEN[Cine] + "</td></tr>"); 


var MDay = ['Select Day|', '01|', '02|', '03|', '04|', '05|', '06|',
'07|', '08|', '09|', '10|', '11|', '12|', '13|', '14|', '15|', '16|', '17|', '18|',
'19|', '20|', '21|', '22|', '23|', '23|','24|', '25|', '26|', '27|', '28|', '29|',
'30|', '31|'];

var MMonth = [ 'Select Month|', 'Jan|', 'Feb|', 'Mar', 'Apr|', 'May|', 'Jun|',
'Jul|', 'Aug|', 'Sept|', 'Oct|', 'Nov|', 'Dec|'];

var MYear = [ 'Select Year|', '2011|', '2012|', '2013|'];

var MTimes = ['Select Hour|', '00|', '01|', '02|', '03|', '04|', '05|',
'06|', '07|', '08|', '09|', '10|', '11|', 
'12|', '13|', '14|', '15|', '16|', '17|',
'18|', '19|', '20|', '21|', '22|', '23|'];


var MTimes1 = ['Select Minutes|', '00|', '05|', '10|', '15|', '20|', '25|',
'30|', '35|', '40|', '45|', '50|', '55|'];

var NSeats = ['1|', '2|', '3|', '4|', '5|', '6|', '7|', '8|', '9|', '10|', '11|', '12|', '13|', '14|', '15|', '16|', '17|', '18|', '19|', '20|',
 '21|', '22|', '23|', '24|', '25|', '26|', '27|', '28|', '29|', '30|', '31|', '32|', '34|', '35|', '36|', '37|', '38|', '39|', '40|', '41|'
, '42|', '43|', '44|', '45|', '46|', '47|', '48|', '49|', '50|', '51|', '52|', '53|', '54|', '55|', '56|', '57|', '58|', '59|'];

var ArrInfo = [];

function SetArrayInfo(Arr) {
ArrInfo = [];
switch (Arr) {
// Cities
case "Cities" : ArrInfo = Cities; break;

// Cinemas
case "C_CountryA" : ArrInfo = C_CountryA ; break;
case "C_CountryB" : ArrInfo = C_CountryB; break;
case "C_CountryC" : ArrInfo = C_CoubntryC; break;
case "C_CountryD" : ArrInfo = C_CountryD; break;

// Movies
case "M_HK" : ArrInfo = M_HK; break;
case "M_Sa" : ArrInfo = M_Sa; break;
case "M_NM" : ArrInfo = M_NM; break;
case "M_Ch" : ArrInfo = M_Ch; break;
case "M_SL" : ArrInfo = M_SL; break;
case "M_Ba" : ArrInfo = M_Ba; break;
case "M_Kr" : ArrInfo = M_Kr; break;
case "M_OM" : ArrInfo = M_OM; break;

// Day selection
case "MDay" : ArrInfo = MDay; break;

// Month Selection
case "MMonth" : ArrInfo = MMonth; break;

// yesr Selection
case "MYear" : ArrInfo = MYear; break;

// Movie Times
case "MTimes" : ArrInfo = MTimes; break;
// Movie Times
case "MTimes1" : ArrInfo = MTimes1; break;

// Number of Seats
case "NSeats" : ArrInfo = NSeats; break;

default : alert("Invalid selection: "+Arr); break; 
} 
}
function SBoxSetup(IDS,Arr) {
if ((IDS == '') || (Arr == '')) { return; } // else { alert(IDS+'\n'+Arr); }
SetArrayInfo(Arr);
s = document.getElementById(IDS);
var scnt = s.options.length;
for (var i = scnt-1; i >= 0 ; i--) { s.options[i] = null; }
var tmp = [];
for (i = 0; i < ArrInfo.length; i++ ) {
tmp = ArrInfo[i].split('|'); if (tmp[1] == '') { tmp[1] = tmp[0]; }
s.options[s.options.length] = new Option(tmp[0],tmp[1],false,false);
}

}

function Summary() { // demonstration and testing purposes only
var tmp = [];
tmp.push('City: '+document.getElementById('City').value);
tmp.push('Cinema: '+document.getElementById('Cinema').value);
tmp.push('Movie: '+document.getElementById('Movie').value);
tmp.push('PickDate: '+document.getElementById('PickDate').value);
tmp.push('MTimes: '+document.getElementById('MTimes').value);
tmp.push('Price: '+document.getElementById('Price').value);
tmp.push('Seats: '+document.getElementById('NSeats').value);
alert(tmp.join('\n')); 
}
</script>

<style type="text/css">
/* td { width:150px; } */
</style>

</head>
<body>
<h1> Price Quote </h1>
<p>
<form onsubmit="return false">
<table border="0">
<tr><td>
Country: 
</td><td>
<select id="City" onchange="SBoxSetup('Cinema',this.value)">
<script type="text/javascript"> SBoxSetup('City','Cities') </script>
</select>
</td></tr>

<tr><td>
City: 
</td><td>
<select id="Cinema" onchange="SBoxSetup('Movie',this.value)">
<script type="text/javascript"> SBoxSetup('Cinema','') </script>
</select>
</td></tr>

<tr><td>
Area: 
</td><td>
<select id="Movie" onchange="SBoxSetup('',this.value)">
<script type="text/javascript"> SBoxSetup('Movie','') </script>
</select>
</td></tr>

<tr><td>
Cine Day:
</td><td>
<select id="MDay">
<script type="text/javascript"> SBoxSetup('MDay','MDay') </script>
</select>
</td></tr>

<tr><td>
Cine Month:
</td><td>
<select id="MMonth">
<script type="text/javascript"> SBoxSetup('MMonth','MMonth') </script>
</select>
</td></tr>

<tr><td>
Cine year:
</td><td>
<select id="MYear">
<script type="text/javascript"> SBoxSetup('MYear','MYear') </script>
</select>
</td></tr>

<tr><td>
Cine Time:
</td><td>
<select id="MTimes">
<script type="text/javascript"> SBoxSetup('MTimes','MTimes') </script>
</select>
</td></tr>


<tr><td>
Time:
</td><td>
<select id="MTimes1">
<script type="text/javascript"> SBoxSetup('MTimes1','MTimes1') </script>
</select>
</td></tr>




<tr><td>
Number of Spectators :
</td><td>
<select id="NSeats">
<script type="text/javascript"> SBoxSetup('NSeats','NSeats') </script>
</select>
</select>
</td></tr>
</table>
<button onclick="Summary()">Get a Quote</button>
</form>
</body>
</html>
Edited by Sydney123 because: n/a
Member Avatar for ivan3510

I don't know how did you create <option>, but if you created it like <option>something</option>, it will not work. You must create it like this: <option value="something">something</option>. So, if javascript doesn't do this, you must add. And then, in summary, add something like this:

cityName=document.getElementById('City').options[document.getElementById('City').selectedIndex].value;
//and now you have option value of City
Edited by ivan3510 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.