JavaScript - Adding Options To A Selectbox

Hi All,

I am a newbie to Javascript, I have a text box which when searched with 3 characters of vendor name will do ajax request and populate the results below the textbox, beside the box are two arrows pointing to a selectbox, when i clcik on the right arrow after the search the vendor name should to added to the select box....

similarly after i add required vendor names, I should be able to delete the name from the select box.

I have completed the ajax search part of the textbox, and I am stuck with the passing value to the selectbox portion.

Anyhelp will be appreciated. thanks in advance!

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.

Hello there !!

I really hope someone can help me out with this.. ( im stuck for about 5 hours all ready!! ) most likely because im not so good in javascript......

I want to show multiple divs on select of a <option> box.
So lets say there are 3 options

Code:

<select name="hoofd_pakket" onchange="showDivs('div',this)">
<option value="a">Alles in 1</option>
<option value="b">Internet + TV</option>
<option value="c">Internet + Bellen</option>
</select>

And a javascript function to show the div`s

Code:

function showDivs(prefix,chooser) {
        for(var i=0;i<chooser.options.length;i++) {
                var div = document.getElementById(prefix+chooser.options[i].value);
                div.style.display = 'none';
        }
 
                var selectedvalue = chooser.options[chooser.selectedIndex].value;
			

	        if(selectedvalue == "a")
                {
                        displayDivs(prefix,"a");
			displayDivs(prefix,"c");
			displayDivs(prefix,"d");
                }
               if(selectedvalue == "b")
                {
                        displayDivs(prefix,"b");
						displayDivs(prefix,"c");
                }
               if(selectedvalue == "c")
                {
                        displayDivs(prefix,"d");
                }
		
 
}
 
function displayDivs(prefix,suffix) {
 
        var div = document.getElementById(prefix+suffix);
        div.style.display = 'block';
}

And some divs to show

Code:

<div id="diva" style="display:none;">blabla</div>
<div id="divb" style="display:none;">blabla</div>
<div id="divc" style="display:none;">blabla</div>
<div id="divd" style="display:none;">blabla</div>

All works fine up to some point, when I choose lets say option 'b' first.. I get 2 divs. Thats good..

Then I choose option 'c' I get only one div. Thats good..

But if I choose option 'b' again, I get 3 divs instead of 2 !! It shoudnt show the div from from option 'c'..

Does anybody understand why??

Thanx allot !!!

I'm trying to figure out how to make a select box change which <div> should show or hide...

Code:

<script language="JavaScript">
	
	function doHideShowMatchplayOptions(divName){    
		var objDiv = document.getElementById(divName);    
		if(objDiv.style.display == ''){        
			objDiv.style.display = 'none    
		} else {        
			objDiv.style.display = '    
		} 
	}
	
</script>

<select name="matchplaytype" onchange="doHideShowMatchplayOptions(\'idHideShowMatchplayOptions\');">
    <option value="">Choose</option>
    <option value="1"># 1</option>
    <option value="2"># 2</option>
</select>

<div id="idHideShowMatchplayOptions" style="display:none;">
<table><tr><td colspan="2">This is # 1</td></tr></table>
</div>

<div id="idHideShowMatchplayOptions" style="display:none;">
<table><tr><td colspan="2">This is # 2</td></tr></table>
</div>

In the above script I'm only able to change one div... What I want is to be able to, if a user changes the selectbox from "# 1" to "# 2", to change the viewable div.... Hope this makes sense and somebody can help...

THanks in advance :-)

Hello,

I have this code:
PHP Code:
<script> 
    function checkForOther(obj) 
    { 
        if (!document.layers) 
        { 
            var txt = document.getElementById("otherTitle"); 
            if (obj.value == "new") 
            { 
                txt.style.display = "inline"; 
                // gives the text field the name of the drop-down, for easy processing 
                txt.name = "selTitle"; 
                obj.name = ""; 
            } 
            else 
            { 
                txt.style.display = "none"; 
                txt.name = ""; 
                obj.name = "selTitle"; 
            } 
        } 
    } 
</script> 


it's should hide/show input field accourding the user choice - if he choose "<option value='new'>new</option>", the follow action should happend:

PHP Code:
                <li id='otherTitle'>
                    <label for='new'>new artist</label>
                    <input type='text'  name='new_artist_name' />                
                </li> 


The script works, but when I click "submit" the parameter that the "select box" should send don't get send...

here is the full code:
PHP Code:
                <li>
                    <label for='artist'>Artists</label>
                    <select name='artist_id' onchange="checkForOther(this)\">
                        <option value='new'>new artist</option>";
                        $query = mysql_query("SELECT id, name FROM `chords_artists` ORDER BY `name` ");
                        while($index = mysql_fetch_array($query)) 
                        {    
                            $artist_id = $index['id'];
                            $artist = $index['name'];
                            echo "<option value='$artist_id'>$artist</option>";
                        }
                        
                    echo "    
                    </select>
                </li>    
                
                <li id='otherTitle'>
                    <label for='new'>new artist:</label>
                    <input type='text'  name='new_artist_name' />                
                </li> 


Can you please help me with it?

Hi,

I'm trying to write a function that will show arrowheads on polylines selected from a select box in a google map. I only want the arrowheads that belong to the line shown to be displayed.

I have got it working using check boxes, and the select box shows the lines, but am having trouble tweaking the code to get the arrows to show up as well. You can see the working checkboxes (and the semi-working selectbox) he http://www.xelawho.com/map/zonesarrowstest.htm

I see the error at line 135 ("Cannot read property 'onclick' of undefined") which I assume refers to the option, but this is where my limited js understanding begins to falter... how do I define the option if the select box options come from xml? And will defining it actually make this code work?

Below are (what I think are) the relevant bits of code. Thanks in advance for any help.

(cross-posted on the google maps forum and here over the last few days, but unanswered)

Code:

var h = 0;
 var v = 0;

// === Function to create a marker arrow ===
      function createArrow(point,icon,category) {
        var arrows = new GMarker(point,icon);
		map.addOverlay(arrows);
		pts[v] = arrows;
		arrows.hide(); 
		arrows.mycategory = category;                                 
        pts.push(arrows);
		}

var select_html = '<select onChange="handleSelected2(this)">' + "selclick(this)" +
                        '<option selected> - Select a bus route - <\/option>';
 
						
	  function showsel(category) {
        for (var v=0; v<pts.length-1; v++) {
		 if (pts[v].mycategory == category) {
            pts[v].show();
		  }
        }
   document.getElementById(category+"option").onclick = true;
      }
	  
      function hidesel(category) {
	  for (var v=0; v<pts.length-1; v++) {
		 if (pts[v].mycategory == category) {
            pts[v].hide();
		  }
        }
}
	  
	 function selclick(option,category) {
        if (option.onclick) {
          showsel(category);
        } else {
          hidesel(category);
        }
		}					
						
						 function handleSelected2(opt,category) {     
  for (var h = 0; h <gpolylines.length; h++) {
		  gpolylines[h].hide();
        }
        var h = opt.selectedIndex - 1; 
        if (h > -1) {
          gpolylines[h].show();
		  }
		  for (var v=0; v<pts.length; v++) {
		  
               selclick(category); 		
			   }
			   
}	

GDownloadUrl("allzonesencoded.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);

var lines = xmlDoc.documentElement.getElementsByTagName("line");

for (var i=0; i< pts.length; i++) {
		var category = lines[a].getAttribute("category");
		}

// ===== final part of the select box =====
        select_html += '<\/select>' ;
        document.getElementById("selection2").innerHTML = select_html;

Okay, I'm having some trouble getting my head around how to do this..

Code:

<select>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>

<select>
<option value="Rhino">Rhino</option>
<option value="Bird">Bird</option>
<option value="Rooster">Rooster</option>
</select>

<select>
<option value="0202A">Rhino - Text</option>
<option value="0203A">Rhino - Text2</option>
<option value="0204A">Bird - Text1</option>
<option value="0205A">Bird - Text2</option>
<option value="0202B">Rhino - Text</option>
<option value="0204B">Rhino - Text2</option>
<option value="0204C">Rooster - Text1</option>
<option value="0205C">Rooster - Text2</option>
<option value="0206C">Rooster - Text3</option>
</select>

So say we had those three drop-downs. I'm looking to make it so that second drop-down only has options corresponding to a relationship between the first and the third drop-down. Example - if you select A in the first drop-down you only see Rhino and Bird in the second drop-down. If you select B you will only see Rhino in the second drop-down. Lastly, if you select C you will only see Rooster in the second drop-down.

Just can't figure this out. >.<

Hello. I am asking this question in the "javascript" forum as my"select box" does use javascript. (Maybe it is actually called a List menu)?

It is probably a simple question. If you look at the link to my example, you will see that my selectbox only displays the first line of the list (which says "select one").

For reasons, I will not be putting images or anything in the blue area, so wish there is a way to have like the first 20 or so selections visible, so I do not have just a big blue box sitting there.

I didn't know if there was a way to do this? I appreciate any advice.
Thank you. Buffmin My link is: http://test.cnjwebsolutions.com/

Hi

I am trying to use Overlib code to develop a dropdown box area that I can populate with categories and buttons, however the Overlib seem to lie relevent to the mouse and not the button.

Does anyone know any good examples maybe jquery, to create this type of large dropdown.

I want to be able to populate the area with images, and categories using php.

I hope this make some sense.

Steve

I've got 2 drop down boxes, dropdown1 and dropdown2, and i want certain options on dropdown2 to be greyed out or unavailable if certain selections are made in dropdown1.

is this possible? and if so, how?

thanks

I'm trying to make a jQuery slider, and I want the user (the person who installs it on their site) to be able to specify options easily. I know the Nivo slider does it from within the $(document).ready() event, but I can't figure out how to do it that way. I want it to be like this:

Code:

<script>
$(document).ready(function() {
myFunction({
option1: 'value1',
option2: 'value2',
etc: 'etc'
});
});
</script>

But how do I recover this data so I can use it later?

Please i am new here and i need some urgent help. I am not much familiar with JavaScript. i have 3 options list as <ul> now what i want is when first scrollbar is chosen the second and third will be enable and will display dates and time..and when somebody choose a date he will be taken to a registration form. for example in my second option i will display dates this will be only enable when the city is being selected from first list:

Code:

<select>
<option>Please Select</option>
<option> 12/12/2009</option>
<option > 12/12/2010</option>
<option> 12/12/2011</option>
<option> 12/12/2012</option>
</select>

here is the code for my option list:

Code:

<ul>
<li>I am in City<select name="dates">
    <option value=0 >Please Select</option>
<optgroup label='test'>
<option value=3 style='font-family:Arial; color:#ffffff;'> City One</option>
<option value=4 style='font-family:Arial; color:#ffffff;'> City Two</option>
<option value=5 style='font-family:Arial; color:#ffffff;'> City Three</option>
<option value=6 style='font-family:Arial; color:#ffffff;'> City Four</option></select></optgroup>
</li>
<li>Dates Available<select name="dates">
    <option value=0>Please Select</option></select>
</li>
<li>Times Available<select name="dates">
    <option value=0>Please Select</option></select>
</li>
</ul>

Thanks for any help

Hi there,

I am looking for a javascript code for an html file. I am looking for something where when you put your mouse over the text, a drop down list will come down. If anyone can point me in the right direction that would be helpful.

An example would be on a site like www.espn.com - when you put your mouse over NBA the following options appear: NBA Home, Scores, Schedule, Teams, etc.

Hello everyone,

Forgive me if I ask something stupid or don't word something just right.
Basically in short I'm really struggling because I don't know javascript beyond the simplest of basic's "manipulating other code"....

What I'm after or trying to do is simply create a script to launch a new page after a X amount of time, like a popup. But I need the new window to have the following options like no toolbar or scroll bars etc... This is the code I've been trying to manipulate for my purpose and just can't get it right meaning it doesn't work at all in fact I haven't even been able to get the timer part worked in since I couldn't get the launch part working..... I've made a web app using asp.net & vb.net and need a launch page so I don't have any toolbars or scrollbars etc....

Any help or input is much appreciated!! Thanks

Code:

<html>
  <script>
    var customerWindow;
    function launchit() {
      var var_height = screen.availHeight - 10;
      var var_width = screen.availWidth - 10;
      var customerUrl = "default.aspx";
      if ( !customerWindow || customerWindow.closed ) {
        options = 'top=0,' + 
                  'left=0,' +
                  'height=' + var_height + ',' +
                  'width=' + var_width + ',' +
                  'fullscreen=no,' +
                  'directories=no,' +
                  'location=no,' +
                  'menubar=no,' +
                  'resizable=yes,' +
                  'scrollbars=yes,' +
                  'status=yes,' +
                  'titlebar=yes,' +
                  'toolbar=no';
        var wname = new String(location.pathname);
        var re1 = /\//g;
        var re2 = /\\/g;
        var re3 = /\./g;
        wname = wname.replace( re1, "" );
        wname = wname.replace( re2, "" );
        wname = wname.replace( re3, "" );
        customerWindow = window.open(customerUrl, wname, options);
        if (customerWindow == null) {
          alert("Could not open a new window. Are popups being blocked?");
        }
        else {
          customerWindow.opener = null;
        }
      }
      else {
        customerWindow.focus();
      }
    }
  </script>
  <head>
    <title>Test Lanuch</title>
  </head>
  <body id="launcher" onload="launchit();">

    <div class="submit">
      <input class="button" type="button" value="Launch" onClick="javascript:launchit();" />
    </div>
  </body>
</html>

This code is supposed to batch transfer options between selects. It works flawlessly for single values, but when I select multiple options, all of them get deleted, but only one transferred. Any help is greatly appreciated! Thank you.

Code:

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            function removeOptionSelected(b,j)
                {
                  var elRem = document.getElementById(b);
                  var elAdd = document.getElementById(j);
                  var elOptNew = document.createElement('option');
                  var i;
                  for (i = elRem.length - 1; i>=0; i--) {
                    if (elRem.options[i].selected) {
                        //alert(elRem.options[i].text+' '+elRem.options[i].value+' deleted!')
                        elOptNew.text = elRem.options[i].text;
                        elOptNew.value = elRem.options[i].value;
                        try {
                            elAdd.add(elOptNew, null); // standards compliant; doesn't work in IE
                        }
                            catch(ex) {
                            elAdd.add(elOptNew); // IE only
                        }
                        elRem.remove(i);
                    }
                  }
                }
        </script>
        <style type="text/css">
            div {
                float: left;
                /*border: 1px solid black;*/
            }
            div.contain {
                width: 536px;
                height: 500px;
                border: none;
            }
            div.side {
                width: 215px;
                height: 500px;
            }
            div.middle {
                width: 100px;
                height: 300px;
                padding-top: 200px;
            }
            select {
                width: 200px;
                height: 500px;
            }
            input {
                width: 82px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div class="contain">
            <div class="side">
                <form name="left">
                    <select id="left" class="left" multiple name="out">
                        <option value="apple">apple</option>
                        <option value="banana">banana</option>
                        <option value="orange">orange</option>
                        <option value="tangerine">tangerine</option>
                        <option value="pineapple">pineapple</option>
                        <option value="carrot">carrot</option>
                        <option value="grapefruit">grapefruit</option>
                        <option value="plum">plum</option>
                        <option value="blueberry">blueberry</option>
                        <option value="strawberry">strawberry</option>
                        <option value="cashews">cashews</option>
                        <option value="peanuts">peanuts</option>
                    </select>
                </form>    
            </div>
            <div class="middle">
                <input type="button" value="Add-->" onClick="removeOptionSelected('left','right');" />
                <input type="button" value="<--Remove" onClick="removeOptionSelected('right','left')" />
            </div>
            <div class="side">
                <form name="right">
                    <select id="right" class="right" multiple name="out">
                        <option value="greenbeans">greenbeans</option>
                        <option value="walnuts">walnuts</option>
                    </select>
                </form>    
            </div>
        </div>
    </body>
</html>