JavaScript - Get Text Node Of Select Option Tag?

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.

Hi all,i'm wondering how to detect select option changes.For example i want the data in database changed when i click on update button and if there are changes on the select option side.If the values on the select option are not changed,i can't update the data..Is there a way to achieve it?Thanks a lot...

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.

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

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.

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>

I am having a hard time understanding how to load a selected option value that I have saved in an external ini file upon load of page. For example, if the user had selected "Baltimore" previously, the value "c" is saved to the external ini file on close. On the next load I want the selected option to read "Baltimore" instead of the default "Atlanta.

Code:

<SELECT NAME="List">
                <option value="a">Arizona</option>
                <option value="b" selected>Atlanta</option>
                <option value="c">Baltimore</option>
                <option value="d">Buffalo</option>

function loadSettings()
{
var savedValue = "c"; //the value is grabbed from an external .ini
}

// loadSettings() is called with body onload=
// selected value is saved to ini upon close

The value is loaded from external .ini, I don't have a problem with that.

I'm creating a paypal webpage and am having some issues with input values updating based on which item the user has selected. The boxes I need to update are the amount, item number and item name. I have the following code but it only updates the first form. If I make a change to the second set of options it updates the first form instead of the second. Any help would be much appreciated.

Code:

function details(val)
{
	var info = val.split("|");
	
	document.getElementById('num').value = info[0];
	document.getElementById('price').value = info[1];
	document.getElementById('package_name').value = info[2];
}


<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="dy" Onchange="details(this.value);">
<option value="1|3|Package 1">Package 1</option>
<option value="2|6|Package 2">Package 2</option>
<option value="3|9|Package 3">Package 3</option>
</select>
<input type="text" id="num" name="item_number" value="1">
<input type="text" id="price" name="amount" value="3">
<input type="text" id="package_name" name="item_name" value="Package 1">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>


<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<select name="pt" Onchange="details(this.value);">
<option value="4|6|Package 4">Package 4</option>
<option value="5|9|Package 5">Package 5</option>
<option value="6|12|Package 6">Package 6</option>
</select>
<input type="text" id="num" name="item_number" value="4">
<input type="text" id="price" name="amount" value="6">
<input type="text" id="package_name" name="item_name" value="Package 4">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"><img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"><input type="hidden" name="add" value="1">
</form>

I have a function that creates a Select dropdown on the fly:


function makeForm() {

mypara=document.getElementById("paraID");
myform=document.createElement("form");
myselect = document.createElement("select");

theOption=document.createElement("OPTION");
theText=document.createTextNode("Revenue");
theOption.appendChild(theText);
myselect.appendChild(theOption);

myform.appendChild(myselect);
mypara.appendChild(myform);
myselect.onchange=TitleOnChange;
mybreak=document.createElement("p");
myform.appendChild(mybreak);
}
function makeForm() {

mypara=document.getElementById("paraID");
myform=document.createElement("form");
myselect = document.createElement("select");

theOption=document.createElement("OPTION");
theText=document.createTextNode("Revenue");
theOption.appendChild(theText);
myselect.appendChild(theOption);

myform.appendChild(myselect);
mypara.appendChild(myform);
myselect.onchange=TitleOnChange;
mybreak=document.createElement("p");
myform.appendChild(mybreak);
}




I would guess that I have to add something like: theOption.setAttribute("value","1");


I want to be able to call the following function and execute a code base on the selection of the Select Dropdown:


<script type='text/javascript'>
function TitleOnChange()
{
if (document.form.select.value == "1")
{
alert("Value selected on the Select dropdonw is 1");
}

}

</script>
<script type='text/javascript'>
function TitleOnChange()
{
if (document.form.select.value == "1")
{
alert("Value selected on the Select dropdonw is 1");
}

}

</script>



I don't know why is not working. I assigned the value 1 to the select dropdown theOption.setAttribute("value","1");

I call the TitleOnChange function myselect.onchange=TitleOnChange;

And Finally I indicate that if the value is equal to 1 do...

view plaincopy to clipboardprint?
if (document.form.select.value == "1")
{
alert("Value selected on the Select dropdonw is 1");
}
if (document.form.select.value == "1")
{
alert("Value selected on the Select dropdonw is 1");
}



Does anyone knows why this doesn't work and how could I fix it?

Any helpt would be highly appreciate.

Thanks

I couldn't think of a way to explain my idea thoroughly, but I'm learning javascript and I have an html <select> form selected by using getElementById. Now, how do I access the data within the option tags to write to a variable? I know there are many simple ways of making it so that the value of the options are the html color name rather than hex code, but I'm doing this to learn javascript.

I have experience with ruby (ok, not THAT much, but I understand the concepts). Anyway's the code explains my problem much better, so here it is:
Code:

<body>
    <form action= "">
        <fieldset>
            <select id="selColor">
                <option value="FFFFFF">White</option>
                <option value="#A9A9A9">Gray</option>
                <option value="#000000">Black</option>
                <option value="#FF0000">Red</option>
                <option value="#FFA500">Orange</option>
                <option value="FFFF00">Yellow</option>
                <option value="#9ACD32">Green</option>
                <option value="#0000FF">Blue</option>
                <option value="#4B0082">Indigo</option>
                <option value="#9400D3">Violet</option>
            </select>

            <input type="button" 
                   value="Change Color" 
                   onclick="changeColor()" />
        </fieldset>
    </form>
<script type="text/javascript">
    //<![CDATA[
    function changeColor() {
        var selColor = document.getElementById("selColor")
        var color = selColor.value
        var colorid = 
        if (confirm("would you like to change color to "+colorid+"?")) {
            document.body.style.backgroundColor = color
        }

    }
    //]]>
</script>

</body>

I haven't initialized var colorid, but I'm trying to set it to either of the highlighted parts of the following piece of my code.
<option id=" white " value="FFFFFF"> White </option>

I want to access that part of the option tags of the element that the user selects. So, without changing the hex values to the color equivalent, how do I access the name of the selected option tag? ( I could make an if/switch statement to translate the hex color into a name and put it into the variable, but I would like to know how to do what I'm asking in case I run into a similair problem.)

I want to use a <select> drop-down in a form to let my user select a date from a list. The problem is how to easily update the list.

Easiest would be to have a list of dates in a separate file, and have code that would read the dates and write them into the <option> statements of the <select> control. Then when the page with the <select> control opens, the code will open the other file, get the dates, and update the <option>s. And all I have to do is periodically FTP a new date file.

I'm stuck in Visual Basic and FileSystemObject, where I can open a file, read line by line into an array, concatenate a string, and write it into a doc. I can't seem to find similar methods in JavaScript - no duh, because this isn't VB!

So _is_ there a way to do this? Maybe a certain way to create the date file so the code can easily find the values? (Like putting the dates into a table with each <TD> having a unique ID?) And assuming I manage to get the dates, I need to write them into the source HTML, vice in the document body.

What objects, methods, properties do I look at? Are there any samples floating around out there? A drop-kick in a good direction is greatly appreciated!

Ed

Hello to all!

How can I insert two values in an array in a salect option like the one below:

Example:

So I need in the "var op1 = new Option" an array thisarray[<?php echo"$user_name" ?>, <?php echo"$user_id" ?>]

Data is being loaded by php from SQL

Code:

var newTextbox = document.createElement('select'); 
newTextbox.className = 'fn-select';
//First user in the populated select menu is the person Loged in
var op1 = new Option("", "");      <----------[an array with two variables] ???
newTextbox.appendChild(op1);
var txt1 = document.createTextNode('<?php echo"$user_name" ?>');
op1.appendChild(txt1);

And then separate these variables and let the following function save them individualy:

Code:

function saveNote (note) {
	resetAjax();
	var photoId = note.container.element.id;
	ajax.setVar('action', 'save');
	ajax.setVar('photo_id', photoId);
	ajax.setVar('note_id', note.id);
	ajax.setVar('left', note.rect.left);
	ajax.setVar('top', note.rect.top);
	ajax.setVar('width', note.rect.width);
	ajax.setVar('height', note.rect.height);
	ajax.encVar('text', note.gui.TextBox.value);  <------------- $user_name
	                                                            <------------- $user_id	ajax.runAJAX();
	var statusDiv = document.getElementById('PhotoNoteStatus');
	ajax.onCompletion = function () {statusDiv.innerHTML = "<p>Note saved.</p>"; }
	return 1;
}

Hey guys.... me again.... tried doing this a few different ways but it seems no matter what I do the last option won't remove for some reason..... if it's the only option, it won't remove either. as it's the last one.

Here is my code..

PHP Code:
function removeCats() {
    
    // Set selected category list
    var sel_cats = document.getElementById('cat_sel');    
    
    for (i = sel_cats.length-1; i >= 0; i--) {

        // Check if the cat is selected

        if (sel_cats.childNodes[i].selected == true) {

            // Remove the category
            sel_cats.removeChild(sel_cats.childNodes[i]);
        
        }
        
    }
    
} 


Thanks again guys!

hi, all... haven't found exactly the solution here, and trying to cobble something together but it's just not working.

php is doing the heavy lifting in terms of generating the code, but the upshoot is i have a script:

Code:

	<script type="text/javascript">
				var values[1] = "This layout includes a 'title' and 'body' content block.";
				var values[2] = "This layout features everything included in the Standard Page layout as well as a 'comments' block.";
			 function replaceText( var_id) {
				document.getElementByID(pageLayout_replace).innerHTML = values[var_id];
			}
		</script>

and a select box:

Code:

			<fieldset>
				<legend>Page Layouts</legend>
				<label for="pageLayout" class="half left">Choose a page layout<br />

					<select name="pageLayout" id="pageLayout" size="5" onChange="replaceText(this.options[this.selectedIndex]);">
						<option value="1">Standard Page</option>
<option value="2">Standard Page w/Comments</option>
					</select>
				</label>
				<label class="half right">
					Page Layout Description:<br />
					<span id="pageLayout_replace">Click on a page layout title to the left to get a description here.</span>

				</label>
			</fieldset>

however, the error console in firefox says

Code:

Error: missing ; before statement
Line: 14, Column: 8
Source Code:
    var values[1] = "This layout includes a 'title' and 'body' content block.";

and then when i try to select one of the items,

Code:

Error: replaceText is not defined
Line: 1

any insight? thanks in advance!

If i have a drop down list on my website, and i want to use javascript to change its selected value, however, i do not have the id/name attribute of the option i want to select, only have the "value" attribute of the option, can it be done?

<select name="category">
<option value="">No Preference</option>
<option value="Apples">Apples</option>
<option value="Oranges">Oranges</option>
<option value="Pears">Pears</option>
<option value="Banana">Banana</option>
</select>

I imagine somehow.. selecting the options and looping through them and match the value. Really new to javascript, can anyone advise?

Thanks in advance!