|
JavaScript - Chained Select Menu
Hi
I wanna to have two select boxes, one of them will contain a list of provinces, and on the other I wanna have a list of cities, but based on selected province. When province selects, cities select box must be changed, too. I don't wanna use AJAX for this purpose, as the server is already too busy and I don't like to disturb it more. So if anyone can provide a solution, just by Javascript and not with AJAX, I would be appreciate it. Cheers! Similar TutorialsHi! I'm using this javascript and php/MySQL: http://www.dynamicdrive.com/dynamici...ects/index.htm When I make a selection in all 3 lists I have a button that saves the selections in my MySQL database, like this: set1, Toyota, Cars, Camry Then I want to be able to select set1 in a list and press an "Edit" button that retrieves these 3 selections and auto selects them in the list. How is this possible? Thanks in advance Vigour Hi I found this code from here http://www.dynamicdrive.com/forums/s...ad.php?t=35776 And cant seem to get it to work. I want to show 2 drop downs and then a hidden div with the answer. 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="scripts/chainedmenu.js"></script>
<script type="text/javascript" src="scripts/config2.js"></script>
<script type="text/javascript">
window.onload=function(){
var lastDiv = "";
document.getElementById('secondlevel').onchange=function(){
if (lastDiv)
document.getElementById(lastDiv).className = "hiddenDiv";
//if value of the box is not nothing and an object with that name exists, then change the class
if (this.value && document.getElementById(this.value)) {
document.getElementById(this.value).className = "visibleDiv";
lastDiv = this.value;}}}
</script>
<style type="text/css">
.hiddenDiv {
display:none;
}
</style>
</head>
<body onLoad="initListGroup('chainedmenu', document.listmenu0.firstlevel, document.listmenu0.secondlevel, 'saveit'); ">
<form name="listmenu0">
<div class="black1 bold">1. Select Product Range</div>
<div class="selects"><select name="firstlevel" style="width:250px;"></select></div>
<div class="black1 bold">2. Select Product Code</div>
<div class="selects"><select id="secondlevel" name="secondlevel" onchange="showDiv(this.value)" style="width:250px;"></select></div>
</form>
<div id="storesContent">
<div id="one" class="hiddenDiv">DIV1</div>
<div id="two" class="hiddenDiv">DIV2</div>
<div id="three" class="hiddenDiv">DIV3</div>
</div>
</body>
</html>
many thanks Roy Hello to all and thank you for any help beforehand. I have an issue with the script below, Select the top dropdown and the second gets populated, this is a nice piece of script, the only problem is that when the information is posted and presented on the process page I click page back to the form to rectify some other field but the ajax resets so I have to select Country & City each time even if thease fields are correct. I know that back button as well as bookmark is a problem with ajax but i think there is a solution the only thing is I don't know how to apply it to this script. Source of the script: http://www.dhtmlgoodies.com/index.ht...chained_select Ajax file: http://www.dhtmlgoodies.com/AJAX/ajax.js test.html 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" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
var ajax = new Array();
function getCityList(sel)
{
var countryCode = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_city').options.length = 0; // Empty city select box
if(countryCode.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getCities.php?countryCode='+countryCode; // Specifying which file to get
ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createCities(index)
{
var obj = document.getElementById('dhtmlgoodies_city');
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
function getSubCategoryList(sel)
{
var category = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_subcategory').options.length = 0; // Empty city select box
if(category.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getSubCategories.php?category='+category; // Specifying which file to get
ajax[index].onCompletion = function(){ createSubCategories(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createSubCategories(index)
{
var obj = document.getElementById('dhtmlgoodies_subcategory');
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
</script>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td>Country: </td>
<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
<option value="">Select a country</option>
<option value="dk">Denmark</option>
<option value="no">Norway</option>
<option value="us">US</option>
</select>
</td>
</tr>
<tr>
<td>City: </td>
<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Here's the content of getCities.php Code: <?php
if(isset($_GET['countryCode'])){
switch($_GET['countryCode']){
case "no":
echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
break;
case "dk":
echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
break;
case "us":
echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
echo "obj.options[obj.options.length] = new Option('New York','25');\n";
echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
break;
}
}
?>
hey just wondering if anyone could help me with a problem im having with this menu for a website i got a chained menu javascript downloaded and all the data entered for it it will work in firefox but wont in internet explorer and i just dont understand why http://www.jomcfall97.talktalk.net/index1.html its the menu on the right hand side this is the error message Message: Object doesn't support this property or method Line: 247 Char: 5 Code: 0 URI: http://www.jomcfall97.talktalk.net/chainedmenu.js Here are lines 244 - 248 function initListGroup(n) { var _content=cs_findContent(n), count=0; if (_content!=null) { content=new cs_contentOBJ("cs_"+n,_content.menu); cs_content[cs_content.length]=content; and heres the full chainedmenu.js Code: var _disable_empty_list=false;
var _hide_empty_list=false;
var onclickaction="alert"
function goListGroup(){
for (i=arguments.length-1;i>=0; i--){
if (arguments[i].selectedIndex!=-1){
var selectedOptionvalue=arguments[i].options[arguments[i].selectedIndex].value
if (selectedOptionvalue!=""){
if (onclickaction=="alert")
alert(selectedOptionvalue)
else if (newwindow==1)
window.open(selectedOptionvalue)
else
window.location=selectedOptionvalue
break
}
}
}
}
if (typeof(disable_empty_list)=="undefined") { disable_empty_list=_disable_empty_list; }
if (typeof(hide_empty_list)=="undefined") { hide_empty_list=_hide_empty_list; }
var cs_goodContent=true, cs_M="M", cs_L="L", cs_curTop=null, cs_curSub=null;
function cs_findOBJ(obj,n) {
for (var i=0; i<obj.length; i++) {
if (obj[i].name==n) { return obj[i]; }
}
return null;
}
function cs_findContent(n) { return cs_findOBJ(cs_content,n); }
function cs_findM(m,n) {
if (m.name==n) { return m; }
var sm=null;
for (var i=0; i<m.items.length; i++) {
if (m.items[i].type==cs_M) {
sm=cs_findM(m.items[i],n);
if (sm!=null) { break; }
}
}
return sm;
}
function cs_findMenu(n) { return (cs_curSub!=null && cs_curSub.name==n)?cs_curSub:cs_findM(cs_curTop,n); }
function cs_contentOBJ(n,obj){ this.name=n; this.menu=obj; this.lists=new Array(); this.cookie=""; }; cs_content=new Array();
function cs_topmenuOBJ(tm) { this.name=tm; this.items=new Array(); this.df=0; this.addM=cs_addM; this.addL=cs_addL; }
function cs_submenuOBJ(dis,link,sub) {
this.name=sub;
this.type=cs_M; this.dis=dis; this.link=link; this.df=0;
var x=cs_findMenu(sub);
this.items=x==null?new Array():x.items;
this.addM=cs_addM; this.addL=cs_addL;
}
function cs_linkOBJ(dis,link) { this.type=cs_L; this.dis=dis; this.link=link; }
function cs_addM(dis,link,sub) { this.items[this.items.length]=new cs_submenuOBJ(dis,link,sub); }
function cs_addL(dis,link) { this.items[this.items.length]=new cs_linkOBJ(dis,link); }
function cs_showMsg(msg) { window.status=msg; }
function cs_badContent(n) { cs_goodContent=false; cs_showMsg("["+n+"] Not Found."); }
function cs_optionOBJ(text,value) { this.text=text; this.value=value; }
function cs_emptyList(list) { for (var i=list.options.length-1; i>=0; i--) { list.options[i]=null; } }
function cs_refreshList(list,opt,df) {
cs_emptyList(list);
for (var i=0; i<opt.length; i++) {
list.options[i]=new Option(opt[i].text, opt[i].value);
}
if (opt.length>0) {
list.selectedIndex=df;
}
}
function cs_getOptions(menu) {
var opt=new Array();
for (var i=0; i<menu.items.length; i++) {
opt[i]=new cs_optionOBJ(menu.items[i].dis, menu.items[i].link);
}
return opt;
}
function cs_updateListGroup(content,idx,sidx,mode) {
var i=0, curItem=null, menu=content.menu;
while (i<idx) {
menu=menu.items[content.lists[i++].selectedIndex];
}
if (menu.items[sidx].type==cs_M && idx<content.lists.length-1) {
var df=cs_getIdx(mode,content.cookie,idx+1,menu.items[sidx].df);
cs_refreshList(content.lists[idx+1], cs_getOptions(menu.items[sidx]), df);
if (content.cookie) {
cs_setCookie(content.cookie+"_"+(idx+1),df);
}
if (idx+1<content.lists.length) {
if (disable_empty_list) {
content.lists[idx+1].disabled=false;
}
if (hide_empty_list) {
content.lists[idx+1].style.display="";
}
cs_updateListGroup(content,idx+1,df,mode);
}
}
else {
for (var s=idx+1; s<content.lists.length; s++) {
cs_emptyList(content.lists[s]);
if (disable_empty_list) {
content.lists[s].disabled=true;
}
if (hide_empty_list) {
content.lists[s].style.display="none";
}
if (content.cookie) {
cs_setCookie(content.cookie+"_"+s,"");
}
}
}
}
function cs_initListGroup(content,mode) {
var df=cs_getIdx(mode,content.cookie,0,content.menu.df);
cs_refreshList(content.lists[0], cs_getOptions(content.menu), df);
if (content.cookie) {
cs_setCookie(content.cookie+"_"+0,df);
}
cs_updateListGroup(content,0,df,mode);
}
function cs_updateList() {
var content=this.content;
for (var i=0; i<content.lists.length; i++) {
if (content.lists[i]==this) {
if (content.cookie) {
cs_setCookie(content.cookie+"_"+i,this.selectedIndex);
}
if (i<content.lists.length-1) {
cs_updateListGroup(content,i,this.selectedIndex,"");
}
}
}
}
function cs_getIdx(mode,name,idx,df) {
if (mode) {
var cs_idx=cs_getCookie(name+"_"+idx);
if (cs_idx!="") {
df=parseInt(cs_idx);
}
}
return df;
}
function _setCookie(name, value) {
document.cookie=name+"="+value;
}
function cs_setCookie(name, value) {
setTimeout("_setCookie('"+name+"','"+value+"')",0);
}
function cs_getCookie(name) {
var cookieRE=new RegExp(name+"=([^;]+)");
if (document.cookie.search(cookieRE)!=-1) {
return RegExp.$1;
}
else {
return "";
}
}
// ----
function addListGroup(n,tm) {
if (cs_goodContent) {
cs_curTop=new cs_topmenuOBJ(tm); cs_curSub=null;
var c=cs_findContent(n);
if (c==null) {
cs_content[cs_content.length]=new cs_contentOBJ(n,cs_curTop);
}
else {
delete(c.menu); c.menu=cs_curTop;
}
}
}
function addList(n,dis,link,sub,df) {
if (cs_goodContent) {
cs_curSub=cs_findMenu(n);
if (cs_curSub!=null) {
cs_curSub.addM(dis,link||"",sub);
if (typeof(df)!="undefined") { cs_curSub.df=cs_curSub.items.length-1; }
}
else {
cs_badContent(n);
}
}
}
function addOption(n,dis,link,df) {
if (cs_goodContent) {
cs_curSub=cs_findMenu(n);
if (cs_curSub!=null) {
cs_curSub.addL(dis,link||"");
if (typeof(df)!="undefined") { cs_curSub.df=cs_curSub.items.length-1; }
}
else {
cs_badContent(n);
}
}
}
function initListGroup(n) {
var _content=cs_findContent(n), count=0;
if (_content!=null) {
content=new cs_contentOBJ("cs_"+n,_content.menu);
cs_content[cs_content.length]=content;
for (var i=1; i<initListGroup.arguments.length; i++) {
if (typeof(arguments[i])=="object" && arguments[i].tagName && arguments[i].tagName=="SELECT") {
content.lists[count]=arguments[i];
arguments[i].onchange=cs_updateList;
arguments[i].content=content; arguments[i].idx=count++;
}
}
if (content.lists.length>0) {
cs_initListGroup(content,content.cookie);
}
}
}
function resetListGroup(n) {
var content=cs_findContent("cs_"+n);
if (content!=null && content.lists.length>0) {
cs_initListGroup(content,"");
}
}
any help appreciated as ive just come to a standstill over this thanks I am trying to create 2 different drop down menus which are chained. First drop down menu: options 1, 2, 3, and 4 Second drop down menu: options 1, 2, 3 and 4 However for the first drop down menu, if you choose the number then that number cannot be selected again on the second drop down menu. So if i pick 4 on the first drop down. then only 1, 2, and 3 should show up on the second drop down OR if you pick 4 on the second drop down it gives you an error saying you selected that value. Here is the complicated part that I cannot figure out. I want each drop down menus on two different pages and not on the same page. So after you select the submit button on the first drop down it should go to another page with the second drop down.. Has anyone seen this before. if you can give me some tips or show me how its done or even a webpage that has already implemented this i would appreciate it. Thank you! part of index page Code:
<form id="form1" name="form1" method="get" action="show.php">
<select id="mark" name="mark">
<option value="">--</option>
<option value="100">BMW</option>
<option value="101">Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="1" class="100">1 series</option>
<option value="3" class="100">3 series</option>
<option value="5" class="100">5 series</option>
<option value="6" class="100">6 series</option>
<option value="7" class="100">7 series</option>
<option value="11" class="101">A1</option>
<option value="23" class="101">A3</option>
<option value="33" class="101">S3</option>
<option value="44" class="101">A4</option>
<option value="54" class="101">S4</option>
</select>
<button name="" type="submit" > Find! </button>
</p>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#series").chained("#mark");
});
</script>
js Code: (function($) {
$.fn.chained = function(parent_selector, options) {
return this.each(function() {
/* Save this to self because this changes when scope changes. */
var self = this;
var backup = $(self).clone();
/* Handles maximum two parents now. */
$(parent_selector).each(function() {
$(this).bind("change", function() {
$(self).html(backup.html());
var selected = "";
selected = selected.substr(1);
/* Also check for first parent without subclassing. */
/* TODO: This should be dynamic and check for each parent */
/* without subclassing. */
var first = $(parent_selector).first();
var selected_first = $(":selected", first).val();
$("option", self).each(function() {
/* Remove unneeded items but save the default value. */
if (!$(this).hasClass(selected) &&
!$(this).hasClass(selected_first) && $(this).val() !== "") {
$(this).remove();
}
});
/* If we have only the default value disable select. */
if (1 == $("option", self).size() && $(self).val() === "") {
$(self).attr("disabled", "disabled");
} else {
$(self).removeAttr("disabled");
}
$(self).trigger("change");
});
/* Force IE to see something selected on first page load. */
$("option", this).first().attr("selected", "selected");
/* Force updating the children. */
$(this).trigger("change");
});
});
};
/* Alias for those who like to use more English like syntax. */
$.fn.chainedTo = $.fn.chained;
})(jQuery);
show.php Code: <?php
if (isset($_GET['mark']))
{
$papar_car=$_GET['mark'];
}
if (isset($_GET['series']))
{
$papar_ser=$_GET['series'];
}
?>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<form id="form1" name="form1" method="get" action="show.php">
<select id="mark" name="mark">
<option value="">--</option>
<option value="100"<? if($papar_car=="100")echo "selected='selected'"; ?>>BMW</option>
<option value="101"<? if($papar_car=="101")echo "selected='selected'"; ?>>Audi</option>
</select>
<select id="series" name="series">
<option value="">--</option>
<option value="1" class="100" <? if($papar_ser=="1")echo "selected='selected'"; ?>>1 series</option>
<option value="3" class="100"<? if($papar_ser=="3")echo "selected='selected'"; ?>>3 series</option>
<option value="5" class="100"<? if($papar_ser=="5")echo "selected='selected'"; ?>>5 series</option>
<option value="6" class="100"<? if($papar_ser=="6")echo "selected='selected'"; ?>>6 series</option>
<option value="7" class="100<? if($papar_ser=="7")echo "selected='selected'"; ?>">7 series</option>
<option value="11" class="101" <? if($papar_ser=="11")echo "selected='selected'"; ?>>A1</option>
<option value="23" class="101" <? if($papar_ser=="23")echo "selected='selected'"; ?>>A3</option>
<option value="33" class="101"<? if($papar_ser=="33")echo "selected='selected'"; ?>>S3</option>
<option value="44" class="101" <? if($papar_ser=="44")echo "selected='selected'"; ?>>A4</option>
<option value="54" class="101"<? if($papar_ser=="54")echo "selected='selected'"; ?>>S4</option>
</select>
<button name="" type="submit" > Find! </button>
</p>
</form>
<script type="text/javascript" language="javascript">
var car_m= <?php echo $_POST['mark']; ?>
</script>
<script type="text/javascript" language="javascript">
var car_m_s= <?php echo $_POST['series']; ?>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.chained.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("#series").chained("#mark");
});
</script>
guys, after i done selection in the form1, i press submit button and Im going to show.php page. on show.php page i want categories to be already selected. whats my problem? Hi there, I am new to Java Script but had to delve into it to create the options for a form I wish to create. I downloaded chainedseletmenu from the following; http://www.dynamicdrive.com/dynamici...menu/index.htm I have the script working, so that you select a first option and a new box appears, then you select the next option and an aditional box appears and so on... This is fine, but I wish to only make additional selection boxes appear if certain options from the drop down lists are selected, but not for others. Also, I wish for users of my forms to be able to add options that are not yet available, I will give an example, lets say cars; if a user selects a make from the list, eg "Honda", a drop down selection list apears, the user then has the option to choose the "Type" of Honda, eg "Prelude", "Civic", "NSR" etc. I would like to be able to add an additional here; = "Not listed". When the "Not listed" is clicked, I would like to give my users the choice to enter the type (in this example, it could be "CRX") into an auto-appearing text box, after form submission, this could then be added the existing selection list for future users. I am aware that this requires use of a database and conection to tit, but for a start, can anyone guide me in the right direction, or does anyone have examples of such code that I can study and get an idea of what to do? This is for a non-profit educational site that I am trying to create for my learners! So would apprieciate any help I can get! Kind regards, Luke Hi I have a form. In this form i have a pop down menu with 1,2,3,4,5 numbers in it. And after that i have 8 more form fields. what i want is when user select any number from pop down menu then these 8 fields should appear. for example when user select 2 from pop down menu then then these set of fields should appear twice i mean 8+8=16. and so on. my code is here 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p>
<select name="jumpMenu" id="jumpMenu">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p>
Type :
<select name="jumpMenu2" id="jumpMenu2" onchange="MM_jumpMenu('parent',this,0)">
<option value="Delux">Delux</option>
<option value="king">king</option>
<option value="exe">exe</option>
</select>
</p>
<p>
<label>Number:
<input name="textfield" type="text" id="textfield" size="5" />
</label>
</p>
<p>
<label>Name:
<input type="text" name="textfield2" id="textfield2" />
</label>
</p>
<p>Date Arr:
<label>
<input type="text" name="textfield3" id="textfield3" />
</label>
</p>
<p>Dep Date:
<label>
<input type="text" name="textfield4" id="textfield4" />
</label>
</p>
<p>
<label>
<input type="checkbox" name="checkbox" id="checkbox" />
Extra</label>
</p>
<p>
<label>
<input type="checkbox" name="checkbox2" id="checkbox2" />
Park</label>
</p>
<p>Remarks:
<label>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</label>
</p>
</form>
</body>
</html>
how this can be done in js Hi Everyone! I would genuinely appreciate some help on this one. I'm trying to combine a chained drop down list with the ability for the last selection to show/hide a div. I've researched and found ways to do both individually, but I'm hitting the wall when it comes to combining the javascript. This is how I'd like it to work: -- User selects from DropDown List 1. -- DropDown List 2 options appear based on the selection in 1. -- User selects from DropDown List 2, -- Appropriate div is shown. Here's the Javascript I'm using to show/hide a div: Code: function showDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = ""; //display div
}
function hideDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = "none"; // hide
}
function hideAllDivs()
{
//Loop through the seclect menu values and hide all
var courseSelect = document.getElementById("courseSelect");
for (var i=0; i<=courseSelect.options.length -1; i++)
{
hideDiv(courseSelect.options[i].value);
}
}
function toggle(showID){
hideAllDivs(); // Hide all
showDiv(showID); // Show the one we asked for
}
Here's the Javascript for the chained drop down lists: Code: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" defer>
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);
parent.change(function(){
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + this.value))
.change();
})
childOptions.not('.static, .sub_' + parent.val()).remove();
}
$(function(){
cascadeForm = $('.cascadeTest');
deptartmentSelect = cascadeForm.find('.deptartmentSelect');
courseSelect = cascadeForm.find('.courseSelect');
cascadeSelect(deptartmentSelect, courseSelect);
});
And lastly, my HTML (simplified) Code: <form action="#" class="cascadeTest">
<table>
<tr>
<th>Organization:</th>
<td><select name="deptartmentSelect" class="deptartmentSelect">
<option value="0">Select a Department</option>
<option value="1">Dept A</option>
<option value="2">Dept B</option>
<option value="3">Dept C</option>
</select></td>
</tr>
<tr>
<th>Territory:</th>
<td><select name="courseSelect" class="courseSelect" onChange="toggle(this.options[this.options.selectedIndex].value)">
<option value="0" class="static">- Courses -</option>
<option value="A1" class="sub_1">Course A1</option>
<option value="B1" class="sub_2">Course B1</option>
<option value="C1" class="sub_3">Course C1</option>
</select></td>
</tr>
</table>
</form>
<div id="A1" style="display:none;">I am Course A1</div>
<div id="B1" style="display:none;">I am Course B1</div>
<div id="C1" style="display:none;">I am Course C1</div>
Thanks again in advance! Hello, I am trying to make a custom select menu. Here is what I have so far: http://mikewgd.com/wp-content/portfo...custom-select/ Im just stuck at getting the <li> to become selected and etc... I am using this as reference: http://v2.easy-designs.net/articles/replaceSelect/ -- Im not using there script exactly Im doing it a different way. Im doing it more as a dropdown menu Code: <ul class="select">
<li class="selected">
cheese
<ul class="drop">
<li>milk</li>
<li>bread</li>
<li class="selected">cheese</li>
<li>pickles</li>
<li>salsa</li>
</ul>
</li>
</ul>
Hi guys, I am after a script which will has parametres to modify the select menu in webpages. I have looked at niceforms http://www.emblematiq.com/lab/niceforms/demo/ However i dont know how to apply it. Any tips would be much appreciated. George I have two select menus, the second menu items should be determined based on the selected item of the first menu, and the problem I face is about using document.write() in adding the select menu items, when I write the items like this it work: Code: <select name="cities" >
<script type="text/javascript">
document.write("<option value=''>city1</option>");
document.write("<option value=''>city2</option>");
document.write("<option value=''>city3</option>");
</script>
</select>
but when I put them in a function they wrote as a text not a menu item, and I must use a function and use if or switch in it, so what's the solution? Hello all! I'm about to use this script below for a project I have. It works great but unfortunately I can't get it to read select menu (selected option) values. It returns undefined. I've asked the author but had no response as yet, so I was wondering if anyone else could see why it wouldn't read the select menu value. Code: var functionname = function () {}
functionname.prototype = {
options : {},
generateShortCode : function() {
var content = this['options']['content'];
delete this['options']['content'];
var attrs = '';
jQuery.each(this['options'], function(name, value){
if (value != '') {
attrs += ' ' + name + '="' + value + '"';
}
});
return '[googleMap' + attrs + ']' + content + '[/googleMap]'
},
sendToEditor : function(f) {
var collection = jQuery(f).find("input[id^=myplugin]:not(input:checkbox),input[id^=myplugin]:checkbox:checked");
var $this = this;
collection.each(function () {
var name = this.name.substring(9, this.name.length-1);
$this['options'][name] = this.value;
});
send_to_editor(this.generateShortCode());
return false;
}
}
var myfunction = new functionname();
Hi All, I searched for an answer but didn't find anything that matched my issue. I am using Dreamweaver CS5 and have a few spry validation select boxes on my page. All but one are working correctly. The one in question is spryselect1 ("spryEquipLoc"). For some reason (which I cannot figure out) this field will display the selectRequiredState even after a selection has been made. Thanks in advance for any help. Here is the code: 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>
<script src="SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationSelect.js" type="text/javascript"></script>
<script src="SpryAssets/SpryValidationTextarea.js" type="text/javascript"></script>
<script src="javascripts/Calendar.js" type="text/javascript"></script>
<!--<script src="javascripts/datetimepicker_css.js"></script>-->
<script type="text/javascript">
var categories = [];
categories["startList"] = ["Equipment issue","Log issue","Operator error","Media issue","Satellite issue","Program issue","Playlist issue","Promo issue"]
categories["Equipment issue"] = ["Digibeta deck","XDCAM deck","Video monitor","Chyron","Switcher","Media port","Downstream keyer","Asset base PC","Device server","Rapid Play X PC","Satellite receiver","Video server","Miranda wall","Crispen automation","Vertigo X-Play"];
categories["Log issue"] = ["Log/Playlist mismatch","Log timing light","Log timing heavy","Incorrect duration","Wrong start time","Events deleted"];
categories["Operator error"] = ["Operator Name1","Operator Name2","Operator name3"];
categories["Media issue"] = ["Damaged tape","Missing media","Dublist not received","Bad media file","Snipe Issue","Bug Issue","Missing audio","Audio out of sync","Audio clipping/distorted","Audio level too low","Embedded credits"];
categories["Satellite issue"] = ["Black on air", "Signal outage", "Sun outage", "Closed captions","Audio issue","Transmitter related"];
categories["Program issue"] = ["Program light","Program heavy","Incorrect program","Incorrect material ID","Program replaced","Incorrect segment lengths","Embedded credits"];
categories["Playlist issue"] = ["Playlist light","Playlist heavy", "Incorrect playlist loaded", "Wrong playback source"];
categories["Promo issue"] = ["Incorrect material ID","Incorrect duration","Incorrect snipe","Incorrect snipe duration","Promo replaced"];
var nLists = 2; // number of select lists in the set
function fillSelect(currCat,currList){
var step = Number(currList.name.replace(/\D/g,""));
for (i=step; i<nLists+1; i++) {
document.forms['frmOnAirActivity']['List'+i].length = 1;
document.forms['frmOnAirActivity']['List'+i].selectedIndex = 0;
}
var nCat = categories[currCat];
for (each in nCat) {
var nOption = document.createElement('option');
var nData = document.createTextNode(nCat[each]);
nOption.setAttribute('value',nCat[each]);
nOption.appendChild(nData);
currList.appendChild(nOption);
}
}
function init() {
fillSelect('startList',document.forms['frmOnAirActivity']['List1'])
}
navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>On Air Activity Form</title>
<style type="text/css">
body,td,th {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 14px;
color: #052F47;
}
body {
background-color: #8E8E8E;
background-image: url();
background-repeat: no-repeat;
}
#form {
behavior: url(PIE.htc);
font-family: Verdana, Geneva, sans-serif;
background-repeat: repeat;
font-size: 14px;
padding: 10px;
width: 660px;
border-radius: 0px 0px 20px 20px;
box-shadow: #666 10px 10px 10px;
border-top-style: none;
border-right-style: outset;
border-bottom-style: outset;
border-left-style: none;
background-color: #589DC6;
float: right;
}
#wrapper {
margin: auto;
width: 860px;
}
</style>
<link href="SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryValidationTextarea.css" rel="stylesheet" type="text/css" />
<link href="css/Calendar.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script type="text/javascript">
// show and hide sections of a form
function preparePage() {
document.getElementById("List1").onclick = function() {
if (document.getElementById("List1").value=="Equipment issue") {
// use CSS style to show it
document.getElementById("Equipment").style.display = "block";
document.getElementById("Satellites").style.display = "none";
} else if (document.getElementById("List1").value=="Satellite issue") {
// use CSS style to show it
document.getElementById("Satellites").style.display = "block";
document.getElementById("Equipment").style.display = "none";
} else {
// hide the div
document.getElementById("Equipment").style.display = "none";
document.getElementById("Satellites").style.display = "none";
}
};
// now hide it on the initial page load.
document.getElementById("Equipment").style.display = "none";
document.getElementById("Satellites").style.display = "none";
}
window.onload = function() {
preparePage();
};
</script>
<div id="wrapper"> <img src="Graphics/banner.png" alt="Banner" width="860" height="84" />
<div id="form">
<form id="frmOnAirActivity" name="frmOnAirActivity" method="post" action="">
<span id="spryAirdate">
<label for="Airdate">Airdate</label><br/>
<input type="Text" id="Airdate" tabindex="1" />
<img src="graphics/cal.gif" onclick="javascript:showCalendar('Airdate')" style="cursor:pointer" />
<span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span></p>
<p>
<span id="spryDiscrepType">
<label for="List1">Event Category</label><br />
<select name="List1" id="List1" tabindex="2" onchange="fillSelect(this.value,this.form['List2'])">
<option selected></option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>
</p>
<span id="spryDiscrepSubType">
<label for="List2">Detail</label><br />
<select name="List2" id="List2" tabindex="3" onchange="fillSelect(this.value,this.form['List3'])">
<option selected></option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>
<p>
<div id="Equipment">
<span id="spryEquipLoc">
<label for="EquipLoc">Equipment Location</label><br/>
<select name="EquipLoc" id="EquipLoc" tabindex="4">
<option selected></option>
<option>Master Control</option>
<option>Media Services</option>
<option>Central Tape</option>
</select>
<span class="selectRequiredMsg">Please select an item.</span></span>
<p>
<span id="spryEquipID">
<label for="EquipID">Equipment ID</label><br />
<input type="text" name="EquipID" id="EquipID" tabindex="5" />
<span class="textfieldRequiredMsg">A value is required.</span></span>
</div>
<p>
<div id="Satellites">
<fieldset><legend>Affected Satellites:</legend>
<table width="424">
<tr>
<td width="152"><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_12" />
NET Sat1</label></td>
<td width="119"><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_16" />
Net Sat2</label></td>
<td width="137"><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_20" />
Net Sat3</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_13" />
Net Sat4</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_17" />
Net Sat5</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_21" />
Net Sat6</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_14" />
Net Sat7</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_18" />
Net Sat8</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_22" />
Net Sat9</label></td>
</tr>
<tr>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_15" />
Net Sat10</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_19" />
Net Sat11</label></td>
<td><label>
<input type="checkbox" name="Satellites_" value="checkbox" id="Satellites_23" />
Net Sat12</label></td>
</tr>
</table>
</fieldset>
</div>
<fieldset>
<legend>Network:</legend>
<table width="424">
<tr>
<td width="152">
<label>
<input type="checkbox" name="Network_1" value="checkbox" id="Network_1" />
Networl_1</label>
</td>
<td width="119">
<label>
<input type="checkbox" name="Network_2" value="checkbox" id="Network_2" />
Network_2</label>
</td>
<td width="137">
<label>
<input type="checkbox" name="Network_3" value="checkbox" id="Network_3" />
Network_3</label>
</td>
</tr>
</table>
</fieldset>
<p>
<label for="OnAirVariance">On Air Variance</label>
<input name="OnAirVariance" type="checkbox" value="" />
<p>
<span id="spryDescription">
<label for="Description">Description</label><br />
<textarea name="Description" id="Description" cols="45" rows="5" tabindex="6"></textarea>
<span class="textareaRequiredMsg">A value is required.</span></span>
<p>
<span id="spryResolution">
<label for="Resolution">Action Taken</label><br />
<textarea name="Resolution" id="Resolution" cols="45" rows="5" tabindex="7"></textarea>
<span class="textareaRequiredMsg">A value is required.</span></span></p>
</form>
</div>
</div>
<script type="text/javascript">
var sprytextfield1 = new Spry.Widget.ValidationTextField("spryAirdate", "date", {validateOn:["blur"], useCharacterMasking:true, format:"mm/dd/yyyy"});
var sprytextfield2 = new Spry.Widget.ValidationTextField("spryEquipID", "none", {validateOn:["blur"]});
var spryselect1 = new Spry.Widget.ValidationSelect("spryEquipLoc", {validateOn:["blur"]});
var spryselect2 = new Spry.Widget.ValidationSelect("spryDiscrepType", {validateOn:["blur"]});
var spryselect3 = new Spry.Widget.ValidationSelect("spryDiscrepSubType", {validateOn:["blur"]});
var sprytextarea1 = new Spry.Widget.ValidationTextarea("spryDescription", {validateOn:["blur"]});
var sprytextarea2 = new Spry.Widget.ValidationTextarea("spryResolution", {validateOn:["blur"]});
</script>
</body>
</html>
hi guys! i would like to know the script for me to auto select an option in a menu on a single click. so i have two pages. on the first page is the button. second page is the drop down menu. menu has selection "fruit" "vegies" "meat". by default fruit is selected. when i click on that button it will automatically select the menu on the second page for "meat". thanks!! the script below should open a new window with a url specified in the select area. However, my script ignores the changes in the select area. it keeps opening the same page. I was wondering could someone take a look and tell me why? Thank you very much. <code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Jump Menu</title> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <script type="text/javascript"> function jump_menu() { var i=document.getElementById("page_select").selectedIndex; document.getElementById("jump_to_page").onclick=function() { (i==0) ? alert("Please select a page to go"):window.open("http://www."+document.getElementById("page_select").options[i].value); } } window.onload=jump_menu; </script> </head> <body> <select id="page_select"> <option>Select a Page</option> <option value="yahoo.ca">Yahoo</option> <option value="topnews.ru">Top News</option> <option value="google.com">Google</option> <option value="amazon.com">Amazon</option> </select> <button type="button" id="jump_to_page">Go</button> </body> </html> </code> *Edit: I thread title should probably be "Initialize indices..."* I've done quite a bit of research but couldn't find what I need to know so here I am. I have some javascript generated by php that reads a configuration file to add options to a select menu. This is somewhat irrelevant but... these options are removed from the menu when clicked and data related to the option is shown on the page... and the option gets re-added when the data is closed. I need the option to go back in the correct place/order in the select menu... which wouldn't be a problem if I could initialize the indices of the menu's options. They need to be initialized because when the page is created, saved settings are read and certain options are not shown in the list because they may already be shown according to the settings... meaning... since browsers automatically increment the indices of the options by 1 (starting at 0), if data is closed that was initially open and therefore not in the select menu at first... the key/index associated with that data will likely not match the correct menu order. Code: <script type="text/javascript">
function addOptionToSelect(selectID,index,offset,val,txt) {
var elSel = document.getElementById(selectID);
elSel.options[index+offset].value = val;
elSel.options[index+offset].text = txt;
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
<?php
foreach ($props as $k => $prop) {
if (!in_array($prop, $_SESSION['crProps'])) {
?>
addLoadEvent(addOptionToSelect('propertySelect',<?php echo $k; ?>,1,'?p=<?php echo $prop; ?>&k=<?php echo $k; ?>','<?php echo $prop; ?>'));
<?php
}
}
?>
</script>
For example, suppose I have the following potential data sets: a,b,c,d,e,f In the config file that helps create the page, suppose it is something like: <Default>0:a|2:c|3:d</Default> (FYI: I've designed it so that the data set names/options are separated by the pipe character ("|") and their corresponding index is the number to the left of the colon.) Then the select menu that is initially generated would be something like: (Every other data set name except for what is already open by default.) <select id="bleh"> <option value="b">b <option value="e">e <option value="f">f </select> And by default, browsers would assign the indices like so: (skipping getElementById and all that...) select.options[0].value = b select.options[1].value = e select.options[2].value = f Whereas, I need it to be initialized like this: select.options[1].value = b select.options[4].value = e select.options[5].value = f So that when the data sets initially open are closed (a, c, or d)... they get put in the correct position in the list. I just thought of something... it's a little inefficient (OCD lol) but it should work and at worst would only cost a couple of milliseconds of processing time. A solution to this problem might be to load the menu with all options so that their indices are correct... and remove the defaults afterward. I'll try it. Hello, I'm trying to populate an HTML drop down list with data from an XML file but have failed miserably so far using examples I've found. Please help. Thanks, Richard I am hoping you guys can help me with this issue. What I am trying to do is fairly simple, depending on what option you select in the menu I want the picture to change to different picture. The code that I posted below works perfectly except for one problem. I need the option value to display the color name, and not have the image code in it. I have researched ways to do this without having to use "value" but I just can't find one that works. Can someone please help me? Thanks in advance for any help given! Code: function changeimg(){
document.getElementById('colors').src=document.getElementById('color_dropdown_options').value
}
Code: <label> <select name="color" class="dropdown_options" id="color_dropdown_options" onchange="changeimg()"> <option value="/images/thumbnails/image1.jpg">White</option> <option value="/images/thumbnails/image2.jpg">Blue</option> <option value="/images/thumbnails/image3.jpg">Green</option> </select> </label> Code: <div id="display"><img src="/images/thumbnails/image1.jpg" width="270" height="382" alt="" id="colors" /> |
|||||||