|
JavaScript - Connected Comboxes
Hi,
I use this javascript to create connected dropdown boxes on my website, but I have some problems. Look at the demonstration: http://javascript.internet.com/navig...-comboxes.html (The code is below) as you see the first box starts with [ Type ] and the second [ style ]. I need to make them disabled somehow (or remove at all) to prevent its selection. I compare the data from the boxes with an empty value to prevent form submission if one of the two boxes is empty and when this [ Type ] or [ style ] is selected it thinks that the selection has been made. How can I solve this problem? Thanks Similar TutorialsI found this perfect javascript for creating dynamic connected drop down boxes. This script works fine but there is just one thing I want to add but unfortunately I'm not familiar with javascript enough... I want to display small images when an item is selected from the second drop down. An image should be assigned somehow to each selection from the right hand drop down menu in the code and when someone selects something from the list, an image should be displayed next to it automatically. Can anyone please amend this script for me if this isn't too difficult? Code: <!-- ONE STEP TO INSTALL CONNECTED COMBOXES:
1. Copy the coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the BODY of your HTML document -->
<BODY>
<!-- Original: Mikayel Muradyan (mikam@freenet.am) -->
<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
// Initialize class for Type and Style
function Type(id, type){
this.id = id;
this.type = type;
}
function Style(id, id_type, style){
this.id = id;
this.id_type = id_type;
this.style = style;
}
// Initialize Array's Data for Type and Style
TypeArray = new Array(
new Type(1, "Apparel"),
new Type(2, "Shoes"),
new Type(5, "Accessories")
);
StyleArray = new Array(
new Style(4, 1, "Apparel_1"),
new Style(7, 1, "Apparel_2"),
new Style(41, 2, "Shoes_3"),
new Style(21, 2, "Shoes_4"),
new Style(17, 2, "Shoes_2"),
new Style(30, 5, "Accessories_3"),
new Style(27, 5, "Accessories_4"),
new Style(31, 5, "Accessories_3")
);
function init(sel_type, sel_style){
document.product.id_type.options[0] = new Option("[ Type ]");
document.product.id_style.options[0] = new Option("[ Style ]");
for(i = 1; i <= TypeArray.length; i++){
document.product.id_type.options[i] = new Option(TypeArray[i-1].type, TypeArray[i-1].id);
if(TypeArray[i-1].id == sel_type)
document.product.id_type.options[i].selected = true;
}
OnChange(sel_style);
}
function OnChange(sel_style){
sel_type_index = document.product.id_type.selectedIndex;
sel_type_value = parseInt(document.product.id_type[sel_type_index].value);
for(i = document.product.id_style.length - 1; i > 0; i--)
document.product.id_style.options[i] = null;
j=1;
for(i = 1; i <= StyleArray.length; i++){
if(StyleArray[i-1].id_type == sel_type_value){
document.product.id_style.options[j] = new Option(StyleArray[i-1].style, StyleArray[i-1].id);
if(StyleArray[i-1].id == sel_style) document.product.id_style.options[j].selected = true;
j++;
}
}
}
//-->
</SCRIPT>
<form name="product">
<select name="id_type" size="1" style="width: 150px;" onChange="OnChange()">
</select>
<select name="id_style" size="1" style="width: 150px;">
</select>
</form>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
// init(5, 31); // Initialize comboboxes by selected sel_type and sel_style
init(); // Default initialize comboboxes for Type and Style
//-->
</SCRIPT>
Thanks in advance! Is there a way add another dropdown form to this script? http://javascript.internet.com/navig...-comboxes.html Or do you happen to have another script that does the same job? I need three level connected dropdown boxes. Each one should be filtered according to previous selection and should be empty before that selection is made... Thanks in advance... I'm looking for four level connected drop down boxes. Unlike all the scripts I have seen on the internet I need all the options to be available if nothing is selected in the previous drop down. So I want something like combination of connected drop downs and ordinary drop down. If the selection is made, display appropriate options in other drop downs... Hope I'm clear... Ex: If I had three properties in Spain, ----------------------------------------------------------------------------------------------------------- | -------- Country: Spain --------- | -------- Country: Spain --------- | -------- Country: Spain ---------- | | -------- State: Andalusia ------- | -------- State: Andalusia -------- | -------- State: Catalonia --------- | | -------- District: Malaga -------- | -------- District: Granada ------- | -------- District: Barcelona ------- | | -------- Town: Marbella --------- | -------- Town: Motril ----------- | --------- Town: Badalona -------- | ----------------------------------------------------------------------------------------------------------- it should show me all the list of available locations, but when I choose Andalusia, it would only show two rest locations – Malaga and Granada, and the same rule when choosing district – Malaga->Marbella Can anyone please help? I need it very much... Thanks in advance! I have a problem with programming in JS the following; first part of the problem: In the middle of the site would be a short text (some kind of quote) which you could refresh simply by clicking on a button bellow text (in this case a new quote would appear in the text box) or you could agree with the quote by clicking on second button bellow the code (in this case there would appear a smiley face in the text box). Quotes would be randomly selected from the database. second part of the problem: I also wish to record whether or not people agree with the quote. I was suggested to use server side language like PHP or ASP to write the results to a file or database on the server. Honestly I have absolutely no idea how to do this. I am familiar with basic HTML but JS is a whole new planet for me. I have spend days trying to figure out the solution but still don't know what to do which is why any sort of help would be greatly appreciated. Thanks in advance |
|||||||