Page 1 of 1

Passing text between <option></option> to text b

Posted: Thu Oct 27, 2005 9:52 am
by Curtis782
I have a JavaScript SELECT menu and am trying to find a way to print the currently selected option to a text box field (versus the value).

<option value="X">text line X</option>

In other words, I am trying to have the "text line one" pass to a text box when a user selects an option. Anyone know how I could do this?

Some starter code:

Code: Select all

function displaydesc1()
{
	document.add_form.desc1.value=document.add_form.partNo1_select.options[document.add_form.partNo1_select.selectedIndex].value;
	
	for (var i = 0; i < document.add_form.partNo1_select.length; i++)
	{
		document.add_form.partone.value=document.add_form.options[i].selected;
	}
}
</script>

Posted: Thu Oct 27, 2005 10:11 am
by Chris Corbyn

Code: Select all

<script type="text/javascript">
<!--

function showSelectedText(what, where)
{
    document.getElementById(where).innerHTML = what;
}

// -->
</script>
<div id="an_example_div"></div>
<select name="something" onchange="showSelectedText(this.options[this.selectedIndex].text, 'an_example_div');">
<option value="foo">Text for option one</option>
<option value="bar">Text for option two</option>
</select>

Posted: Thu Oct 27, 2005 10:12 am
by hawleyjr

Code: Select all

//untested
<script language="JavaScript">

function sendToText(selObj){
	var txtBox = document.getElementById("textbox");
	
	txtBox.value = selObj[selObj.selectedIndex].text;
}
</script>

<select name="testlist" onChange="sendToText(this);">
  <option value="1">item 1</option>
  <option value="2">item 2</option>
  <option value="3">item 3</option>
</select>
<input name="testbox" id="textbox" type="text">

Posted: Thu Oct 27, 2005 10:22 am
by feyd
Client-side... :?

found solution

Posted: Thu Oct 27, 2005 10:28 am
by Curtis782
Thank you for the advice. I found a solution:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
 <title>Example</title>
</head>
<script language="JavaScript" type="text/javascript">
<!--
function showSelected()
{
 var selObj = document.getElementById('selSeaShells');
 var txtIndexObj = document.getElementById('txtIndex');
 var txtValueObj = document.getElementById('txtValue');
 var txtTextObj = document.getElementById('txtText');
 
 var selIndex = selObj.selectedIndex;
 txtIndexObj.value = selIndex;
 txtValueObj.value = selObj.options[selIndex].value;
 txtTextObj.value = selObj.options[selIndex].text;
}
//-->
</script>
 
<body>
<form name="Example_Form">
 <p> <select id="selSeaShells" onChange="showSelected();">
   <option value="val0">sea zero</option>
   <option value="val1">sea one</option>
   <option value="val2">sea two</option>
   <option value="val3">sea three</option>
   <option value="val4">sea four</option>
  </select>
 </p>
 <p> <input type="text" id="txtIndex" /> selectedIndex <br />
  <input type="text" id="txtValue" /> options[].value <br />
  <input type="text" id="txtText" /> options[].text <br />
 </p>
</form>
</body>
</html>