Dynamic Dropdown Menus and Textboxes 1

[Dudeman4560]

I'm trying to have it, so that when a user clicks on an item in the dropdown menu it will show up in a textbox next to it.

What I'm currently using is the same as

http://www.felgall.com/jstip37.htm

Which uses the code below.


Thanks




START OF CODE

<script language="JavaScript" type="text/JavaScript">
function addOptions(chosen) {
var selbox = document.myform.opttwo;
if (selbox.options[0].value == " ") {
selbox.options.length = 0;
}
var fnd = 0;
for (n=0;n<selbox.length;n++){
if(selbox.options[n].text == chosen){
fnd = 1;
}}
if (!fnd) selbox.options[selbox.options.length] = new Option(chosen, selbox.options.length);
}

function delOptions(chosen) {
var selbox = document.myform.opttwo;
if (selbox.options[0].value != " ") {
nomatch = new Array();
for (n=0;n<selbox.length;n++){
if(selbox.options[n].text != chosen){
nomatch[nomatch.length] = new Array(selbox.options[n].value, selbox.options[n].text);
}}
selbox.options.length = 0;
if (nomatch.length == 0) {
selbox.options[0]= new Option("Select entries from the list at left"," ");
} else {
for (n=0;n<nomatch.length;n++){
selbox.options[n] = new Option(nomatch[n][1], nomatch[n] [0]);
}}}}
</script>


<form name="myform">
<div
align="center">
<select name="optone" size="1">
<option value=" "
selected="selected"> </option>
<option value="First Choice">First
Choice</option>
<option value="Second Choice">Second
Choice</option>
<option value="Third Choice">Third
Choice</option>
</select>
<select name="opttwo" size="1">
<option value=" "
selected="selected">Select entries from the list at
left </option>
</select>
<br />
&nbsp;<br />
<input name="add" value="Add"
onclick="addOptions(document.myform.optone.options[document.myform.optone.selectedIndex].text);"
type="button" /> <input
name="del" value="Remove"
onclick="delOptions(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].text);"
type="button" /></div>
</form>

END OF CODE

 

[spewn]

i don't get it...where will the text box be? you currently have 2 dropdown boxes. that stays the same? only a new text box is added, and will be dynamically filled with the current value picked from drop down box #1, right?

- g

 

[Dudeman4560]

Actully the new textbox will replace the second dropdown, and will get the user's picked value.

 

[spewn]

fair enough...but the current set up allow for multiple selections, so you would need to accomodate for that in the textbox right?

you can use a list box where you determine the size. it operates much in the same way as the drop down box, except the contents are alway displayed, depending on what size attribute you give to it.

<script language="JavaScript" type="text/JavaScript">
function addOptions(chosen) {
var selbox = document.myform.opttwo;
if (selbox.options[0].value == " ") {
selbox.options.length = 0;
}
var fnd = 0;
for (n=0;n<selbox.length;n++){
if(selbox.options[n].text == chosen){
fnd = 1;
}}
if (!fnd) selbox.options[selbox.options.length] = new Option(chosen, selbox.options.length);
}
function delOptions(chosen) {
var selbox = document.myform.opttwo;
if (selbox.options[0].value != " ") {
nomatch = new Array();
for (n=0;n<selbox.length;n++){
if(selbox.options[n].text != chosen){
nomatch[nomatch.length] = new Array(selbox.options[n].value, selbox.options[n].text);
}}
selbox.options.length = 0;
if (nomatch.length == 0) {
selbox.options[0]= new Option("Select entries from the list at left"," ");
} else {
for (n=0;n<nomatch.length;n++){
selbox.options[n] = new Option(nomatch[n][1], nomatch[n] [0]);
}}}}
</script>
<form name="myform">
<div
align="center">
<select name="optone" size="1">
<option value=" "
selected="selected"> </option>
<option value="First Choice">First
Choice</option>
<option value="Second Choice">Second
Choice</option>
<option value="Third Choice">Third
Choice</option>
</select>
<select name="opttwo" size="5" multiple>
<option value=" "
selected="selected">Select entries from the list at
left </option>
</select>
<br />
&nbsp;<br />
<input name="add" value="Add"
onclick="addOptions(document.myform.optone.options[document.myform.optone.selectedIndex].text);"
type="button" /> <input
name="del" value="Remove"
onclick="delOptions(document.myform.opttwo.options[document.myform.opttwo.selectedIndex].text);"
type="button" /></div>
</form>

i have changed only this line:

<select name="opttwo" size="1">

to:

<select name="opttwo" size="4" multiple>

however, if you just want a regular textbox where the content is only one item at a time (which doesn't appear to be the case) let me know.

hope that helps.

- g

 

[Dudeman4560]

Yeah, that is what I needed, the only thing is that people need to be able to type information, but your code is the closes I have been.

 

[spewn]

ok. when the user selects an option in the dropdown, that value is displayed in the text box. but what happens when the user selects a second, or third option? does the value in the text box get replaced, or does it get added to it, on a new line?

- g

 

[Dudeman4560]

it gets added.

 

[spewn]

this code illustrates how you can add to a multi-line text box from a drop down select box.

<script>
function addOption(x) {

sOption=document.getElementById('textBox1').value;
sOptions=sOption.split("\n");
 if (sOption == '') {document.getElementById('textBox1').value=x+"\n";}
 else {  
  if (sOptions.length > 1) {document.getElementById('textBox1').value=sOption+x+"\n";}
  else {document.getElementById('textBox1').value=sOption+"\n"+x+"\n";}
 }
document.getElementById('textBox1').focus();
}
</script>

<select name=selectBox1 id=selectBox1 onchange=addOption(value);>
<option value=0></option>
<option value='First Choice'>First Choice</option>
<option value='Second Choice'>Second Choice</option>
<option value='Third Choice'>Third Choice</option>
</select>

<textarea rows=5 name=textBox1 id=textBox1>
</textarea>

although it needs to be cleaned up, is this what you are talking about?

- g

 

[Dudeman4560]

That is perfect.

 

[Dudeman4560]

Thanks

 

[Dudeman4560]

What are the specific parts I need to change, for example lets say my current dropdown menu is called dropmenu1, and my current textbox is called boxtext1, where do I make the changes for that?

I can't find the name of your dropdown menu to change it.

Basicly where do I change it so that routing still works.

 

[Dudeman4560]

Ok, never mind the last post

There is going to be more than one drop down box, do I need to keep this code alone from all the other code, or will just changing the textbox1 value for every case do the trick?

 

[spewn]

if you mean multiple drop downs with their own corresponding text box, just streamline it so you take in variables as parameters...

change:

onchange=addOption(value);

to:

onchange=addOption(value,'textBox1');

and change the code to:

<script>
function addOption(x,x2) {
sOption=document.getElementById(x2).value;
sOptions=sOption.split("\n");
 if (sOption == '') {document.getElementById(x2).value=x+"\n";}
 else {  
  if (sOptions.length > 1) {document.getElementById(x2).value=sOption+x+"\n";}
  else {document.getElementById(x2).value=sOption+"\n"+x+"\n";}
 }
document.getElementById(x2).focus();
}
</script>

this script accounts for multiple selects/textboxes. just remember to name the new textboxes so they are accessed accordingly.

hope that helps...

- g

 

[Dudeman4560]

Ok, if I understand you correctly, just add <onchange=addOption(value,'textBox1');> for each specific dropdown and textbox combo?

 

[spewn]

yes...just change the 'textBox1' to whatever you name the text box that corresponds to that specific drop down...

hope that helps.

- g

 

[Dudeman4560]

Ok, but how will it deliniate from the different dropdowns?

yes, this has helped a great deal.

 

[Dudeman4560]

Never mind, I have not had too much sleep lately.

 

[spewn]

it doesn't need to, since all dropdowns have a 'value' attribute that is passed onchange...it should be a universal script, as long as you predetermine the text box it will populate...

here's the code, with two drop downs and two text boxes:

<script>
function addOption(x,x2) {
sOption=document.getElementById(x2).value;
sOptions=sOption.split("\n");
 if (sOption == '') {document.getElementById(x2).value=x+"\n";}
 else {  
  if (sOptions.length > 1) {document.getElementById(x2).value=sOption+x+"\n";}
  else {document.getElementById(x2).value=sOption+"\n"+x+"\n";}
 }
document.getElementById(x2).focus();
}
</script>

<select name=selectBox1 id=selectBox1 onchange=addOption(value,'textBox1');>
<option value=0></option>
<option value='First Choice - Group 1'>First Choice - Group 1</option>
<option value='Second Choice - Group 1'>Second Choice - Group 1</option>
<option value='Third Choice - Group 1'>Third Choice - Group 1</option>
</select>

<textarea rows=5 cols=25 name=textBox1 id=textBox1>
</textarea>

<br><br>

<select name=selectBox1 id=selectBox1 onchange=addOption(value,'textBox2');>
<option value=0></option>
<option value='First Choice - Group 2'>First Choice - Group 2</option>
<option value='Second Choice - Group 2'>Second Choice - Group 2</option>
<option value='Third Choice - Group 2'>Third Choice - Group 2</option>
</select>

<textarea rows=5 cols=25 name=textBox1 id=textBox2>
</textarea>

if you run into problems, post again.

good luck.

- g

 

[spewn]

oops, got your post after.

- g

 

[Dudeman4560]

Firefox, and AOL seem to have problems running this code, from Firefox I get

Error: document.getElementById(x2) has no properties

Aol does not run it, but Internet Explorer does,(which is interesting since Aol uses, Internet Explorer.

I'm going to try using the code you just posted.