|
JavaScript - Connected Comboxes With Icons
I 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! Similar TutorialsHi, 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 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 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 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! A general question really, but does anyone have a good technique or source for creating disabled versions of tool bar buttons? Many thanks for any assistance, S Hi all I'm messing around with this video theme over at Hive45 ... the episodes change dynamically, but as you can see the social icons don't pickup the URL change. I found a guy who had a fix, but it was using the sexybookmarks wordpress plugin and I couldn't workout how to change the icons and control the display (my icons are manually coded). E.g... Code: <a rel="nofollow" id="linker" target="_blank" href="http://reddit.com/submit?url=http://hive45.com/shows/episode-2/&title=Episode 1" title="Reddit"><img src="http://hive45.com/wp-content/themes/hive45/images/reddit_32.png" title="Reddit" alt="Reddit" class="social"></a> Here's the fix: The main bit of work for the bookmarks was in the java.js and episode.php file. Firstly episode.php I added, after line 17: Code: // <---------- MS Starts Here --------->
if ( function_exists('get_sexy') )
$sexy_str = get_sexy();
endwhile;
endif;
echo 'sexy:' . $sexy_str ;
// <---------- MS End Here --------->
Then in java.js in the ScreenWrite function, after around document.getElementById('linker').setAttribute("href",plinker); line 114 I added: Code: // <---------- MS Start Here --------->
// Find the sexy: tag, grab the text until the end, update the sexy-marks span then drop the text
from=strep.indexOf('sexy:');
sexy=strep.slice(from+5);
strep=strep.slice(0,from);
document.getElementById('sexy-marks').innerHTML = sexy ;
// <---------- MS End Here --------->
Again in java.js in the selectEpisode function right at the beginning: Code: // <---------- MS Starts Here --------->
// Get a reference to the sexy bookmarks part
sexyObj=document.getElementById('sexy-marks');
//sexyObj.innerHTML="";
delete sexyObj;
// <---------- MS Ends Here --------->
Finally in the index.php where you want the SexyBookmarks to be: Code: <span id="sexy-marks">
<?php
$temp = $wp_query;
query_posts("p=".$theid);
if(function_exists('selfserv_sexy')) { selfserv_sexy(); }
$wp_query = $temp;
?>
</span>
I'm a complete noob with javascript sadly. Any idea how to change the above code to work with manually coded bookmarks? cheers |
|||||||