|
JavaScript - Dropdown From Array
Hi, I want to set a different value for each name and use url for values.
Can somebody help me with this? eg: name A3 and value http://www.audi.com Code: <script type="text/javascript">
function dynamic1(parent,child){
var parent_array = new Array();
parent_array[''] = ['Please select a manufacturer'];
parent_array['Audi'] = ['A3','A4','A5','A6','A8','Q5','Q7','S3','S4','S5','S6','S8','RS6'];
parent_array['Dacia'] = ['Sandero','Logan'];
parent_array['FIAT'] = ['Bravo','Punto','Grande Punto'];
parent_array['Peugeot'] = ['207','308','407','607'];
parent_array['SEAT'] = ['Ibiza','New Ibiza','Leon'];
parent_array['Skoda'] = ['Fabia','Octavia Tour','Octavia 2','Superb'];
var thechild = document.getElementById(child);
thechild.options.length = 0;
var parent_value = parent.options[parent.selectedIndex].value;
if (!parent_array[parent_value]) parent_value = '';
thechild.options.length = parent_array[parent_value].length;
for(var i=0;i<parent_array[parent_value].length;i++){
thechild.options[i].text = parent_array[parent_value][i];
thechild.options[i].value = parent_array[parent_value][i];} }
</script>
Similar Tutorialshello everyone im coding a website at the moment using aspx and i have came to a snag. im trying to make a dropdown list which is populated by an array call my chaletDetails.aspx page - each item in the array will be directed to this page. ive diffled abit, but the more i do the more im afraid of breaking something lol. if someone could maybe look at the code and show me how this could be achieved id appriciate it very much. The code i have for my dropdown list is as follows... this is in divResorts.js var resorts = new Array("Adelboden", "Auron", "Oppdal", "Las Lenas", "La Pierre St Martin", "Val Ceneis", "Les Menuires", "Champex-Lac", "Puy St Vincent"); function populateSelectList() { var mystring = document.getElementById('divResort').innerHTML mystring += "<h4>Our Resorts</h4><select name='resorts'>" mystring += "<option>Choose a Resort</option>" for (i = 0; i < resorts.length; i++) { mystring += "<option value='" + resorts[i] + "'>" mystring += resorts[i] + "</option>" } mystring += "</select>" mystring += "<h4>Our Chalets</h4>" document.getElementById('divResort').innerHTML = mystring } within the body i have this called as: <div id="divResort"> <script type="text/javascript">populateSelectList();</script> </div> Hi, I'm trying to integrate an address finder (http://www.craftyclicks.co.uk/) into my shopping cart (OsCommerce). I can get it to work but I need to add my own functionality. I'm not very experienced with JavaScript and my head has entered an infinite loop by now. The problem is that the address finder script can change the selected country in a drop-down list depending on the postcode entered by the user (using the onblur event handler). What I need it to do is to remove all other countries depending on the postcode. I can get it to remove all other countries but how do i return to the original list of countries when the postcode is changed again? Once all other counties are removed, the drop-down list will obviously only have one option left... I guess the question is also how does a function remember what it has done before, when it is called again? I have written this short test script as it is easier to work with than the craftyclicks oscommerce contribution: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript">
//<![CDATA[
function store(element) {
// store values
var cl = element;
var text_list = new Array();
var value_list = new Array();
var length = cl.length;
for (var foo=0; foo<length; foo++) {
text_list[foo] = cl.options[foo].text;
value_list[foo] = cl.options[foo].value;
alert("text array " + foo + " " + text_list[foo]);
alert("value array " + foo + " " + value_list[foo]);
}
populate(cl, text_list, value_list);
}
function populate(element, text, value) {
// populate options with previously stored values
var cl = element;
var length = cl.length;
cl.options.length=0;
for (var bar=0; bar<length; bar++) {
cl.options[bar]= new Option(text[bar], value[bar], false, false);
}
}
function crafty_set_country(code) {
var cl = document.getElementById('select');
store(cl);
for (var i=0; i<cl.length; i++) {
if (cl.options[i].value == code) {
alert(cl.options[i].value + " found");
var value = cl.options[i].value;
var text = cl.options[i].text;
cl.options.length=0;
cl.options[0]=new Option(text, value, true, true);
/*
for (var j=0; j<cl.length; j++) {
alert("second loop " + cl.options[j].text);
if (cl.options[i].value != code) {
cl.options[j]
}
}
*/
} else {
alert(cl.options[i].value);
}
}
}
//]]>
</script>
</head>
<body>
<form>
<select id="select">
<option value="10">ten</option>
<option value="20">twenty</option>
<option value="30">thirty</option>
<option value="40">fourty</option>
<option value="50">fifty</option>
<option value="60">sixty</option>
</select>
<input type="button" value="remove" name="button" onClick="crafty_set_country(50)">
<input type="button" value="repopulate" name="button" onClick="crafty_set_country(100)">
</form>
</body>
</html>
Many thanks! Martin hey guys The first dropdown has some options as : abc(a) bcd(a) cde(b) def(b) efg(c) fgh(c) The second dropdown has : a b c On selecting abc(a) in first dropdown the 'a' must get selected in second dropdown,on selecting cde(b) second dropdown must have 'b' and so on,also the second dropdown value should be disabled(grayed out) for user.Need the code in javascript.ty in advance. Hello, I am completely new to HTML/JS/CSS, therefore I know very little. I have two drop-down prompt controls with month names. One has just one value (say "July") and the other has all the months of the year ("January".."December"). The first prompt control is hidden on the page. How do I set the default selection of the second prompt control to the value present in the first prompt control? So, when the page is run, the second prompt control should automatically show "July". I was reading up on the selectedIndex property (?), but I know that it won't work because I want Index 0 to be selected in the first control and Index 6 in the second, and I expect it to change every month (next month it will be index 7 that should be automatically selected). If it matters, I am using IE8. Thanks! Hi, I have two dropdown lists with the second one being dependent on the selection in the first. Options in list 1: 1,3 or 4 List two should be enabled when 3 or 4 is selected in list 1. So far so good, managed to get it to work with only one set of lists, but I actually have 18 of those sets in this form: Code: <select name="fw[$i]" id="fw[$i]"> <option value="1">FWH</option> <option value="3">links</option> <option value="4">rechts</option> <option value="0" selected></option> </select><br /> <select name="lie[$i]" id="lie[$i]" disabled="disabled" onchange="showBox($i,xxx);"> <option value="0" selected>---</option> <option value="1">gut</option> <option value="2">schlecht</option> <option value="3">Strafschlag</option> <option value="4">OB</option> </select> $i is my index generated by my PHP script and runs from 1 to 18. Everything works just fine as long as the index is not in play. With the index my function breaks, most probably due to my inability to extract the second parameter (xxx above) from the selection field. Here's my function, there could be something wrong there too with how exactly to specify the proper dropdown list to enable. Code: function showBox(field,val) {
if (val > 1) {
var box = 'lie[' + field + ']';
document.form1.box.disabled == false;
}
else {
document.form1.box.disabled == true;
}
}
Finally, I'm not that adept in javascript programming, more like a trial and error guy, how has hit the wall with this problem. Thanks in advance! Joe I am working on a page where the user will select a location from a dynamically generated dropdown list. I was able to create the php multidimensional array (tested and working) from a MySql database using the users information at login, but I'm having problems converting it to a javascript multidimensional array. I need to be able to access variables that I can pass to a number of text fields within an html form. For instance, if a user belongs to a company with multiple addresses, I need to be able to let them select the address they need to prepopulate specific text fields. php array creation: Code: if ($row_locations)
{
while ($row_locations = mysql_fetch_assoc($locations))
{
$mail[$row_locations['comp_id']]=array('mailto'=>$row_locations['mailto'], 'madd'=>$row_locations['madd'], 'madd2'=>$row_locations['madd2'], 'mcity'=>$row_locations['mcity'], 'mstate'=>$row_locations['mstate'], 'mzip'=>$row_locations['mzip'], 'billto'=>$row_locations['billto'], 'badd'=>$row_locations['badd'], 'badd2'=>$row_locations['badd2'], 'bcity'=>$row_locations['bcity'], 'bstate'=>$row_locations['bstate'], 'bzip'=>$row_locations['bzip']);
}
}
javascript function - this should create the array and send variables to text fields. Code: function updateAddress() {
var mail = $.parseJSON(<?php print json_encode(json_encode($mail)); ?>);
{
if (comp_id in mail) {
document.getElementById('mailto').value=mail.comp_id.mailto.value;
document.getElementById('madd').value=mail.comp_id.madd.value;
document.getElementById('madd2').value=mail.comp_id.madd2.value;
document.getElementById('mcity').value=mail.comp_id.mcity.value;
document.getElementById('mstate').value=mail.comp_id.mstate.value;
document.getElementById('mzip').value=mail.comp_id.mzip.value;
} else {
document.getElementById('mailto').value='';
document.getElementById('madd').value='';
document.getElementById('madd2').value='';
document.getElementById('mcity').value='';
document.getElementById('mstate').value='';
document.getElementById('mzip').value='';
}
}
}
Where is this breaking? Thanks in advance. I have the following array that contain the people who are on off on certain time: Code: var all = [
["1234", "Jim", "2011-10-23 00:00:00", "2011-10-25 07:00:00"],
["1235", "Jack", "2011-10-21 00:00:00", "2011-10-21 08:00:00"],
["1236", "Jane", "2011-10-11 00:00:00", "2011-10-11 00:30:00"],
["1237", "June", "2011-10-20 00:00:00", "2011-10-20 12:00:00"],
["1238", "Jill", "2011-10-14 00:00:00", "2011-10-14 11:00:00"],
["1239", "John", "2011-10-16 00:00:00", "2011-10-16 10:30:00"],
["1240", "Jacab", "2011-10-19 00:00:00", "2011-10-20 08:30:00"]
];
The above array, I wish to use javascript to insert into the FullCalendar (http://arshaw.com/fullcalendar/). I notice that the only way seems to be using the FullCalendar array style (or structure) as follows: Code: $('#calendar').fullCalendar({
events: [
{
title : 'event1',
start : '2010-01-01'
},
{
title : 'event2',
start : '2010-01-05',
end : '2010-01-07'
},
{
title : 'event3',
start : '2010-01-09 12:30:00',
allDay : false // will make the time show
}
]
});
So, the question is: How do I insert my array to match with the FullCalendar array? cause FullCalendar array had a different array structure from my array - and I don't think so that I can write in this way: Code: $('#calendar').fullCalendar({
events:all
});
Appreciate any help provided. I can't seem to figure out how to accomplish this. In my website, I would like the user to input text into a single or multiple textbox(es) and then have the contents of the textbox(es) stored to either a variable or an array. Then I would like to have that variable/array compared to other arrays. Basically, the user is searching for items in a database. The user can search for as many or as little items as they want. Then the item(s) will be compared to multiple arrays to find out if what the user wants is in the database. So for example, let's say the user is searching for recipes that have all or part of these ingredients: chicken, broccoli, lemon, honey. So, there would have been a total of 4 textboxes...one for each ingredient. These ingredients are stored to an array..lets call it ingredient(). In the database of recipes, each recipe has its own array which includes the ingredients needed to make the recipe, we'll call them tag1(), tag2(), and tag3(). Now, I want the array, ingredient(), to be compared to each of the "tag" arrays to see if any of the "tag" arrays include exactly match the ingredient() tag in part or in whole. Is this possible? Hey guys, I'm hoping this is possible or that there is an easier way to do this. I'm having an issue with displaying data from one array that contains information about users in a table that is controlled by a different array. Is it possible to do this or is this use of arrays to display the data the wrong approach? The table is located on one webpage, I simply want to extract one piece of information that I have placed in the initial array as part of the login script that contains user information (for validation for login etc) and display it in a table on the new webpage that is opened as a result of successful validation of the user details. I'm completely stumped and after many attempts I just can't seem to get it to work. Okay well here is my code. i want to mkae it so the functions add together to get a total price, i need some help Code: <html>
<head>
</head>
<script type="text/javascript">
function addit(){
if(document.getElementById("add").value=="0")
{
document.getElementById("amount").value="$0.00"
}
if(document.getElementById("add").value=="1")
{
document.getElementById("amount").value="$5.00"
}
if(document.getElementById("add").value=="2")
{
document.getElementById("amount").value="$10.00"
}
if(document.getElementById("add").value=="3")
{
document.getElementById("amount").value="$15.00"
}
}
function addit2(){
if(document.getElementById("add2").value=="4")
{
document.getElementById("amount").value="$30.00"
}
if(document.getElementById("add2").value=="5")
{
document.getElementById("amount").value="$40.00"
}
}
</script>
<body>
<table class="comparison pricing-email" border="0" cellspacing="1" cellpadding="0" width="30%">
<tbody>
<tr class="row1">
<td class="col1">Choose # of EMAIL accounts:
<select style="width: 60px; font-size: 17px;" name="add" id="add" onChange="addit()">
<option value="0"> </option>
<option value="1">1</option>
<option value="2">3</option>
<option value="3">6</option>
</select>
</td>
</tr>
<tr class="row2">
<td class="col2">Choose # of EMAIL accounts:
<select style="width: 60px; font-size: 17px;" name="add" id="add2" onChange="addit2()">
<option value="0"> </option>
<option value="4">44</option>
<option value="5">43</option>
<option value="3">342</option>
</select>
</td>
</tr>
<tr class="row1">
<td class="col1">Total Price: <input type="text" id="amount" value="" style="border:none; font-size:13pt;"></td>
</tr><tr>
<td>
<input type="submit" name="submit" value="Sign-Up">
</td>
</tr>
</tbody>
</table>
</form>
</body>
if i press any key from keyboard all related word to that alphabet will display below the dropdown.what is the code for it.thanks.
I am just learning but this is driving me nuts. Any help would be appreciated. I am trying to change the value of a quantity dropdown on this page: http://www.walmart.com/ip/Energizer-...Pack/872068#rr This will change it in the browser but the 3 value is not retained when I add the item to cart. Do I have to do something with onchange? What? Code: document.getElementsByClassName('stripitems')[0].childNodes[3].childNodes[3].value= 3
if I had two dropdown boxes... If I select the first one with the value of the month name .. eg.. January. How can I get the second dropdown box below to get that same value.?? Thanks S. Can someone please explain this code to me please. Its the beginning of a javascript code to hide and show a drop down menu. Ill include the html code to give u a better understanding too. Thank you so much, ive been frustrated on this for nearly a month HTML Code: <body>
<h1>Menu Test</h1>
<ul id=”menu”>
<li class=”menu”><a href=”#”>Home</a></li>
<li class=”menu”><a href=”#”>Products</a>
<ul>
<li><a href=”#”>Sub-item 1</a></li>
<li><a href=”#”>Sub-item 2</a></li>
<li><a href=”#”>Item 3</a></li>
</ul></li>
<li class=”menu”><a href=”#”>Support</a>
<ul>
<li><a href=”#”>Sub-item 1</a></li>
<li><a href=”#”>Sub-item 2</a></li>
</ul></li>
<li class=”menu”><a href=”#”>Employment</a>
<ul>
<li><a href=”#”>Sub-item 1</a></li>
<li><a href=”#”>Sub-item 2</a></li>
</ul></li>
<li class=”menu”><a href=”#”>Contact Us</a>
<ul>
<li><a href=”#”>Sub-item 1</a></li>
<li><a href=”#”>Sub-item 2</a></li>
</ul></li>
</ul>
</body>
JavaScript Code: // global variables for timeout and for current menu
var t=false,current;
function SetupMenu() {
if (!document.getElementsByTagName) return;
items=document.getElementsByTagName(“li”);
for (i=0; i<items.length; i++) {
if (items[i].className != “menu”) continue;
//set up event handlers
thelink=findChild(items[i],”A”);
thelink.onmouseover=ShowMenu;
thelink.onmouseout=StartTimer;
//is there a submenu?
if (ul=findChild(items[i],”UL”)) {
ul.style.display=”none”;
for (j=0; j<ul.childNodes.length; j++) {
ul.childNodes[j].onmouseover=ResetTimer;
ul.childNodes[j].onmouseout=StartTimer;
}
}
}
}
// find the first child object of a particular type
function findChild(obj,tag) {
cn = obj.childNodes;
for (k=0; k<cn.length; k++) {
if (cn[k].nodeName==tag) return cn[k];
}
return false;
}
I need help with this js... this is dropdown list...if user choose okc in first list(vrsta) in second (celik) user can choose C0270 and C0370...if chosen pc in first list in second user can choose C1330 and C1530 etc... There are two boxes...ans15 and ans14...and button which user clicks The idea is that user choose one option(okc,pc or cc) and choose option (C0270 or something else) onclick some values should be written in boxes example: chosen okc and C0270 in ans15 "hello" and in ans14 "goodbye" should be writen if chosen okc and C0370 in ans15 "hi" and in ans14 "bye" should be writen Code: <script type="text/javascript">
function setOptions(chosen) {
var izbor = document.form3.celik;
izbor.options.length = 0;
if (chosen == " ") {
izbor.options[izbor.options.length] = new Option('choose',' ');
}
if (chosen == "okc") {
izbor.options[izbor.options.length] = new Option('C0270','C0270');
izbor.options[izbor.options.length] = new Option('C0370','C0370');
}
if (chosen == "pc") {
izbor.options[izbor.options.length] = new Option('C1330','C1330');
izbor.options[izbor.options.length] = new Option('C1530','C1530');
}
if (chosen == "cc") {
izbor.options[izbor.options.length] = new Option('C1120','C1120');
izbor.options[izbor.options.length] = new Option('C1220','C1220');
}
}
</script>
</head>
<body>
<FORM name="form3">
<table width="439" height="139" border="1">
<tr>
<td width="200" height="33">
<div align="center">
<select name="vrsta" size="1"
onchange="setOptions(document.form3.vrsta.options
[document.form3.vrsta.selectedIndex].value);">
<option value=" " selected="selected"> </option>
<option value="okc">Opsti konstrukcijski celici</option>
<option value="pc">Poboljsani celici</option>
<option value="cc">Cementirani celici</option>
<option value="cl">Celicni liv</option>
<option value="sl">Sivi liv</option>
</select>
<br>
<br>
</div></td>
<td width="108" rowspan="3"> </td>
<td width="109" rowspan="3"> </td>
</tr>
<tr>
<td height="33"><div align="center">
<select name="celik" size="1">
<option value=" " selected="selected">Izabrati prvo vrstu</option>
</select>
</div></td>
</tr>
<tr>
<td height="23" rowspan="2"><div align="center">
<input type="button" value=" ok " onclick="beta(this.form)" />
</div>
</div>
<div align="center"></div> </td>
</tr>
<tr>
<td><input type="type" "number" value="" name="ans15" size="9" /></td>
<td><input type="type" "number" value="" name="ans14" size="9" /></td>
</tr>
</table>
</FORM>
</body>
</html>
hey guys, i wonder why my drpdown box cant be copied? can some1 help me correct it.. thanks! Code:
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
var desc = new Array();
desc['a1'] = 'issue';
desc['a2'] = 'tel';
desc['a3'] = 'account name';
desc['a4'] = 'caller';
desc['a5'] = 'OS';
desc['a6'] = 'modem';
desc['a7'] = 'router';
function CopyFields(){
var copytext = '';
for(var i = 0; i < arguments.length; i++){
copytext += desc[arguments[i]] + ': ' + document.getElementById(arguments[i]).value + '\n';
}
var tempstore = document.getElementById(arguments[0]).value;
document.getElementById(arguments[0]).value = copytext;
document.getElementById(arguments[0]).focus();
document.getElementById(arguments[0]).select();
document.execCommand('Copy');
document.getElementById(arguments[0]).value = tempstore;
}
--></script> <body>
<form>
<table border="0" cellpadding="0" cellspacing="0" style="width: 500px;">
<tbody>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 500px;">
<tbody>
<tr>
<td style="text-align: right;">
issue:</td>
<td>
<textarea id="a1"></textarea></td>
</tr>
<tr>
<td style="text-align: right;">
tel:</td>
<td>
<input id="a2" /></td>
</tr>
<tr>
<td style="text-align: right;">
account name:</td>
<td>
<input id="a3" /></td>
</tr>
<tr>
<td style="text-align: right;">
caller:</td>
<td>
<input id="a4" /></td>
</tr>
<tr>
<td style="text-align: right;">
os:</td>
<td>
<select id="a5"><option selected="selected" value="">Windows 7</option><option value="">Windows Vista</option><option value="">Windows XP</option><option value="">X MAC 10.x</option><option value="">Other</option></select></td>
</tr>
<tr>
<td style="text-align: right;">
modem:</td>
<td>
<input id="a6" /></td>
</tr>
<tr>
<td style="text-align: right;">
router:</td>
<td>
<input id="a7" /></td>
</tr>
</tbody>
</table>
<input onclick="CopyFields('a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7');" type="button" value="Copy" /> <input type="reset" /></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
Hi all! I'm new and, well, I don't know a whole lot about javascript, honestly. I'm much more of an artistic design person than I am a coder. That said, I recently made a dropdown menu using an old version of Fireworks, but I've been having trouble getting it working on my site. The menu displays alright, but the dropdown does not appear right below it...instead, it's off and to the right somewhere. For the life of me, and with my limited knowledge, I cannot figure out how to fix it. The menu in question is the 'store' button on the following webpage- http://rlfcomic.com/test2.php# Note how the dropdown just seems to float at an arbitrary spot. Any ideas on what I'm doing wrong? HI I am trying to add a 'orderby' or 'sortby' dropdown to a website to give various options of order picked from a MySQL recordset, the example below is what I am looking for that changes on re-fresh and remembers the selection chosen. Example Site - Waterstones Bookstore I think it would be a mixture of Javascript and PHP?? I have searched for hours looking for a solution Many thanks in advance |
|||||||