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!

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

Need line break for descrip. box from two combo boxes

Status
Not open for further replies.
Scootman

Scootman

Programmer
Aug 12, 2003
27
US
In the modified code below, I have two combo boxes with each one linked to the other. A description box updates itself on whichever value is chosen from the two selection boxes.

If you try the code below, clicking on 'Numbers' on the left menu will bring up a choice of '1' or '2'. When you choose '1', the description box brings up:

The number 1 rules!

The way I want it to show is:

The number
1 rules!

Basically, I need a break in the line. It seems that the quotation marks are what's keeping me from inserting html code to break up the line. Anyone have any idea on how to make the line break happen? The textarea code at the bottom is what drives the description box. I can control that, but I can't control the array. I appreciate any help and/or advice you can give.

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

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

//Double Combo 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
 
Sort by date Sort by votes
Put in a break:
Code: 
"The number[COLOR=red]<br>[/color] 1 rules!",

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
Already tried it. When I run the page, it just shows up as

"The Number<br> 1 rules!",

Thanks anyway though.

I also tried

"The Number" <br> "1 rules",

but that doesn't work either.


All of this is for a menu navigation page. This was the only double combo box with description code that I could find. If anyone knows of another, I could try manipulating that code for what I need.






 
Upvote 0 Downvote
Update:

After a long search, I have found a different code that's more flexible and allows for line breaks as well as other html coding. The only thing I can't figure yet is how to create another combo box that connects with the one below and then have the array identify each submenu choice (like the old code did). If anyone has any ideas with how to do this, please share them. Thanks!

Code: 
<html>
<head>
<script type="text/javascript">
//credit for the script(s) go to glenngv.  Scootman added the tables so the description area appears on the same line.
var arr = new Array();
arr[0] = 'Pick a value at left.';
arr[1] = 'This is a <a href="[URL unfurl="true"]http://www.google.com/">link[/URL] to Google.com</a>.';
arr[2] = 'This is in line 1.<br />This is in line 2.';
arr[3] = '<span class="redmsg">This text uses a red Verdana font.</span>';
//...and so on
</script>
<style type="text/css">
.redmsg {font:normal 12px Verdana; color:red;}
</style>
</head>
<body>
<table width="80%" border=2 bordercolor="black">
<tr>
<td width="40%">
<form>
<select name="s" onchange="document.getElementById('desc').innerHTML=arr[this.selectedIndex]">
<option value="">Select one</option>
<option value="item 1">item 1</option>
<option value="item 2">item 2</option>
<option value="item 3">item 3</option>
</select>
</td>
<td width="40%">
<div id="desc">Pick a value at left.</div>
</form>
</td>
</table>
</body>
</html>

- Scootman
 
Upvote 0 Downvote
Excellent. Usage of <br> or <br /> depends on the doctype you are using in your page.
 
Upvote 0 Downvote
Sorry, I didn't know there was a Javascript forum. I saw other Javascript questions in this forum, thus the reason I posted here. Consider this post closed. Thanks.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
230
Alt255
Alt255
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
814
pmonett
pmonett
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
224
lmcate
lmcate
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
642
PeDa
PeDa
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
769
3esolar
3

Part and Inventory Search

Sponsor

Back
Top