Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Two List Boxes, Need a Line Break In Descrip. Box 1

Status
Not open for further replies.

Scootman

Programmer
Aug 12, 2003
27
US
I posted this in the wrong forum and was told to try the Javascript forum (since it is JS).

From the code below, I want to make it possible to enter a line break in the text_array portion. Currently, it can't happen because of the way the array's setup (they won't let me put in HTML coding). I've tried many things, including the obvious <br>. No luck.

Here's how a description box shows now:

The number 1 rules!

Here's what I need it to show:

The number
1 rules!

Now I think I know what I need to fix this, but I don't know how to do either one. I believe that:

#1. Instead of a <textarea>, I might need a <Div></div>
#2. I need to incorporate InnerHTML in there somewhere.

If the DIV idea is the way to go, I do have the code for that and it shows HTML fine, but unfortunately it is only for one list box and not two linked ones. I'll cross that bridge if I have to.

As for a workaround for this code, any help is greatly appreciated.


Code:
<html><head></head><body>

<script language="JavaScript">
<!--

//Double Combo or List Box with Description Code- by Randall Wald ([URL unfurl="true"]http://www.rwald.com)[/URL]
//Visit JavaScript Kit ([URL unfurl="true"]http://javascriptkit.com)[/URL] for script
//Credit must stay intact for use

var num_of_cats = 3; // This is the number of categories, including the first, blank, category.
var open_in_newwindow=1; //Set 1 to open links in new window, 0 for no.
var option_array = new Array(num_of_cats);

option_array[0] = new Array("Please select a letter or number to the left"); // This is the first (blank) category. Don't mess with it.

option_array[1] = new Array("-- Select A Number Below --",
"    1    ",
"    2    ");

option_array[2] = new Array("-- Select A Letter Below --",
"    A     ",
"    B     ");


var text_array = new Array(num_of_cats);

text_array[0] = new Array("Here's how you use this box: First, you select a category in the Category drop-down. Then, select a link from the Link drop-down. Then, read the description in this box, or click Go to go to the page. If you ever need to see this help again, just go back to the top option in the Category box."); // These are general instructions. Change them if you want, or keep them if you don't.

text_array[1] = new Array("Pick A number from the box at left.", // Note that the first entry here is a general description of this category. After than, they're descriptions of each link. Make sure that you don't put the first link first; the general description must be first.
"The number 1 rules!",
"The number 2 is great, but not great!");

text_array[2] = new Array("Pick a letter from the box at left.",
"As a letter, A is awesome!",
"As a letter, B is...boring!");


var url_array = new Array(num_of_cats);

url_array[0] = new Array("#"); // The first category. This should have no items other than "#".


url_array[1] = new Array("#", // The second category; the first "real" category. Note the initial #. That is the category 
"");

url_array[2] = new Array("#",
"");


function switch_select()

{
  for (loop = window.document.form_1.select_2.options.length-1; loop > 0; loop--)
  {
    window.document.form_1.select_2.options[loop] = null;
  }
  
  for (loop = 0; loop <option_array[window.document.form_1.select_1.selectedIndex].length; loop++)
  {
    window.document.form_1.select_2.options[loop] = new Option(option_array[window.document.form_1.select_1.selectedIndex]

[loop]);
  }
  
  window.document.form_1.select_2.selectedIndex = 0;
}
  
function switch_text()

{
  window.document.form_1.textarea_1.value = text_array[window.document.form_1.select_1.selectedIndex]

[window.document.form_1.select_2.selectedIndex];
}

function box()

{
  if (window.document.form_1.select_2.selectedIndex == 0)
  {
    alert("Where do you think you're going?");
  } else {
    if (open_in_newwindow==1)
    window.open(url_array[window.document.form_1.select_1.selectedIndex]

[window.document.form_1.select_2.selectedIndex],"_blank");
    else
    window.location=url_array[window.document.form_1.select_1.selectedIndex][window.document.form_1.select_2.selectedIndex]
  }
}

function set_orig()

{
  window.document.form_1.select_1.selectedIndex = 0;
  window.document.form_1.select_2.selectedIndex = 0;
}

window.onload=set_orig

// -->
</script>

<form name="form_1" onSubmit="return false;">
<!-- This should be the same as the general instructions in the above code. -->
<select valign="top" name="select_1" size="3" onChange="switch_select(); switch_text();">
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Numbers &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
<option>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Letters &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
</select>
<select size="3" name="select_2" onChange="switch_text();">
<option>&nbsp; -- Please select a letter or number to the left -- </option>
<option> </option>
<option> </option>
</select>
<textarea style="overflow:hidden" readonly WRAP="off" name="textarea_1" rows=3 cols=38>
</textarea><br><br><br>
<input type="submit" onClick="box();" value="Go!">
</form>

<p align="center"><font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"></font></p>
</body>
</html>

Thanks!

Scootman
 

Change this:

Code:
"The number 1 rules!",

to this:

Code:
"The number\n1 rules!",

to insert a line break. Technically, it is not HTML coding, so you should be OK ;o)

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 
It works perfect...Awesome! I remember seeing \n mentioned somewhere in a function during my long searches for an answer, but it made no sense to me at the time - I ended up skipping it.

I can now use this code for just about every list I want to make for my double combo boxes and triple combo boxes.

Thanks again, you were a great help.
 
Just a quick related question:

Is there a limit to the number of \n instances?

If I wanted to create a list of 50 to 100 items, each with \n entries for line breaks, then I'd be okay right? Sure it might be messy, but I'm used to that - I write code in Excel for a living.

Thanks!
 

I don't think there is a limit, really. Well... there is, but it would be too big for you to worry about (64,000 or so, maybe).

Dan



[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top