JavaScript - How Adding Tooltips For Each Option Items In A Single Select Drop Down Menu

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!!

Hello everybody,

I have a javascript adding new options to a drop down select menu getting the information from the database. The code is as written below:
Code:

function setOptions1() {
var selbox2 = document.egitimgiris.alttipID;
selbox2.options.length = 0;
selbox2.options[selbox2.options.length] = new Option('Option1','22')
selbox2.options[selbox2.options.length] = new Option('Option2','23')
selbox2.options[selbox2.options.length] = new Option('Option3','24')
selbox2.options[selbox2.options.length] = new Option('Option4','25')
}

I want one of them to be added as selected. I will put an "if" check and if it the value of the option and the value in the database is equal I want that option to be added as "selected".

Is this possible? If yes, how? Please help.

Thanks and regards
telmessos

This is hopefully my last jquery question. I have a slight issue with my buttons and dropdown menu. What happens is lets say user chooses option type "ABCDE" in first dropdown menu and then second dropdown menu chooses the value "4" for the number of answers and then clicks on the buttons "A","B","C" and "E", well if the user then decides to change the option type to "ABC", the buttons "A", "B" and "C" are still selected from the last time they have been selected.

What I want is that if the Option Type (OptionDropId) changes, then buttons selected is refreshed so no buttons are selected from the last time they have been selected.

This did used to work but when I included my change() event handler in my code which I need, the buttons do not refresh whenever a new dropdown option (OptionDropId) is selected. So I think the edit of the code may need to happen in the code below:

Code:

             $(document).ready(function ()
        {
            var OptDrop = new Array();
    
    OptDrop.abc = ["",1,2];
    OptDrop.abcd = ["",1,2,3];
    OptDrop.abcde = ["",1,2,3,4];
    OptDrop.trueorfalse = [1];
    OptDrop.yesorno = [1];
            
            $("#optionDropId").change(function ()
            {
                var selectedValue = $(this).val();
                $("#numberDropId").html("");
                $.each(OptDrop[selectedValue], function (x, y)
                {
                    $("#numberDropId").append($("<option></option>").attr("value", y).html(y));
                });
            }); 
    
            $("#optionDropId").change();
        });

My code is in JSfiddle, (the second dropdown menu and buttons may not appear in JSFiddle but the code does work properly, I feel it is better displaying code in JSfiddle then in my questions as it will take up a lot of space. If you want to see working version then post code in your web document and it should work).

My Code: [click below][1]


[1]: http://jsfiddle.net/XZ7um/10/

I'm tearing my hair out with this one and can't figure out why it won't work, and am hoping someone could help a Javascript noobie out.

Basically, I need the script to hide two divs if one of the options in a <select> menu is selected.

Here's the code I've got for the Javascript:
Code:

function typeoflisting() {

	var selectform = document.getElementById('propertytype');
	
	if (selectform.options[selectedIndex].value == "sell") {
		document.getElementById('per_week').style.display = 'none';
		document.getElementById('bond').style.display = 'none';
	}
	else {
		document.getElementById('per_week').style.display = 'block';
		document.getElementById('bond').style.display = 'block';
	}	
}

Here's the <select> form:
Code:

<select id="propertytype" name="propertytype" class="select" onchange="typeoflisting()">	
	<option value="lease">I'd like to lease a property to tenants</option>
	<option value="sell">I'd like to sell a property</option>
	<option value="share">I'd like to share a property</option>
</select>

And here's the first div I'm attempting to hide:
Code:

<div id="per_week" style="float: left;"> per week</div>

And the second div I'm attempting to hide:
Code:

<div style="float: left; padding: 20px 20px 0px 0px;" id="bond">
<h3>Bond</h3>
<input type="text" class="text" value="$"/>
</div>

Could anyone please tell me what I'm doing wrong?

Hello all,

I am currently looking to create a JavaScript menu for a website I am working on. It currently expands and collapses on click. The code in question is pasted below:-

menu_status = new Array();

function showHide(theid){
if (document.getElementById) {
var switch_id = document.getElementById(theid);

if(menu_status[theid] != 'show') {
switch_id.className = 'show';
menu_status[theid] = 'show';
}else{
switch_id.className = 'hide';
menu_status[theid] = 'hide';
}
}
}

As you can see, it basically shows and hides the menu (when clicked). I want it to open the menu when clicked and close when another menu is opened. I have looked and have not been able to find a solution into it. Ideally I donot want it to be a long piece of code as I do have a working menu but with many more lines of JavaScript than the one I have posted.

I need a solution to it urgently, your help is appreciated.

Thanks

I am looking for a way to add multiple items with a single URL to my shopping cart. any ideas?

cheers,

Hey chaps, hope someone can help with this:
I have a PHP form, with a couple of dynamic Select menus, which are populated from two SQL tables:
// tbl_main_colour:
Code:

ID, NAME
1, Red
2, Blue
3, Green

// tbl_shade_colour:
Code:

ID, NAME, FK_MAIN_COLOUR_ID
1, Light Red, 1
2, Dark Red, 1
3, Light Blue, 2
4, Dark Blue, 2
5, Light Green, 3
6, Dark Green, 3

What I'm after is something to filter the second select option, after the first select option has been chosen
// Select 1:
Code:

Red

// Select 2:
Code:

Light Red
Dark Red

I'm pretty sure this is possible, but not sure how to go about it, any help would be most appreciated.

Hi all,

i was trying to create a windows startup javascript where i was trying to perform a specific action after a time interval.

Could anybody please help me with the syntax to add this timer to my js file

thanks in advance

Hi Guys,

A bit stuck here and was wondering what you guys think.

I have an HTML Select Option with a list of countries. A user saves that page and when he wants to return to the same page later at some point, i would like to populate the countries drop down list with what he entered initially.

Is there an easy way to do this?

Thanks.

On my site, when you select something from the first drop down box, javascript creates the options to appear in a second drop down box.

I have this code:
Code:

function addOption(selectbox, value, text)
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;
	selectbox.options.add(optn);
}

and then this:
Code:

if(document.drop_list.Category.value == 'Assembly'){
addOption(document.drop_list.SubCat,"Electronic", "Electronic");
addOption(document.drop_list.SubCat,"Marketing", "Marketing");
addOption(document.drop_list.SubCat,"Retailing", "Retailing");
addOption(document.drop_list.SubCat,"Construction", "Construction");
}

Thats an example of how it works. What I want to now add, is an onclick to each subcategory. I want the onClick to execute the function changecolour1(). This function changes the class of a div, but ive got that sorted out so its probably irrelevent.

I want to know if anyone call tell me how to make it create the OPTION with a text, value AND onclick attributes. And then I want to be able to specifiy the value of the Onclick.

I'm pretty new at javascript, a lot of that code was written for me. Please shed some light for me.
Thanks in advance
Micomator.

Hello.

Could anyone help me with this? I understand how to use OnChange with select boxes to allow the page to be redirected when certain options are selected, such as;

Code:

<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    <option value="">Choose a destination...</option>
    <option value="http://www.yahoo.com/">YAHOO</option>
    <option value="http://www.google.com/">GOOGLE</option>
    <option value="http://www.altavista.com/">ALTAVISTA</option>
    <option value="http://www.amazon.com/">AMAZON</option>
    <option value="http://artlung.com/">ARTLUNG</option>
</select>

However, I would like the page to only be redirected when just one option (out of 3) are chosen... and when the other two are chosen, we remain on the same page. such as;

Code:

<select onchange="window.open(this.options[this.selectedIndex].value,'_top')">
    <option value="">Choose an option...</option>
    <option value="tonight">TONIGHT</option>
    <option value="tomorrow">TOMORROW</option>
    <option value="http://mysite.com/selectdate">SELECT DATE</option>
</select>

is this possible?

Many Thanks,
Patrick.

How to add title to options in Select box , where the options are generated from the data base.
Any idea

Hey, how do I make the following accessible if JS is disabled?

Code:

<select onchange="if (this.selectedIndex > 0) location.href=this[this.selectedIndex].value;"> 
                 <option value="www.domain.com">Your Domain</option>   </select>

Hi,

I have a select box whose options are populated from an xml file, the code goes like this:

Code:

 var sel_html = '<select onChange="handleSelected(this)">' +
                        '<option selected> - Select a zone - <\/option>';

var a = 0;

      function createPolygon(pts,colour,name) {
        var shape = new GPolygon(pts,"#000000",1,1,colour,0.5, {title:name});
        gpolygons[a] = shape;
       
		// ======= Add the entry to the select box =====
        sel_html += '<option> ' + name + '<\/option>';
        // ==========================================================
        
        a++;
        return shape;
      }	
		
						


// ======= This function handles selections from the select box ====
      // === If the dummy entry is selected, the info window is closed ==
      function handleSelected(opt) {
	  for (var a=0; a<gpolygons.length; a++) {
		  gpolygons[a].hide();
        }
        var a = opt.selectedIndex - 1; 
        if (a > -1) {
          gpolygons[a].show()
        }
 }

sel_html += '<\/select>';
        document.getElementById("selection").innerHTML = sel_html;

which works fine for showing one option at a time, but what I would like to do is have one of the selections to be to show all of the options at the same time. At the moment I have it working with a checkbox that works off a separate piece of code, but it would be great to have that option within the select box.

You can see the select box in question here - it's the one on the right which says "Select a zone"

thanks in advance.