codetoad.com
  ASP Shopping CartForum & BBS
  - all for $20 from CodeToad Plus!
  
  Home || ASP | ASP.Net | C++/C# | DHTML | HTML | Java | Javascript | Perl | VB | XML || CodeToad Plus! || Forums || RAM 
Search Site:
Search Forums:
  Dynamic dropdown list  dallas72 at 21:05 on Monday, September 22, 2003
 


Please ignore the previous post as I was having trouble with my machine and repeated my post several times. Here is the post as it should read.

I have code where I want to take the substring of a selected value of one drop down box and append it to another already existing drop down box for option[0]. The script finishes o.k. but nothing changes. Is it possible to do what I am trying to do? Here is an Example:

Thanks,

Bill


<html>
<head>
<title>Untitled</title>

<script language="JavaScript1.2">

function extract()
{
var i=RESULT_FORM.CNY.selectedIndex;

var row=RESULT_FORM.CNY.options.value;
(row.substring(3,5));

document.RESULT_FORM.cny2.options[0].value = row.substring(3,5);

}
<form name="RESULT_FORM>

<SELECT NAME=CNY size="1"
style="backgroundcolor:#ffffcc;
onDblClick="JAVASCRIPT:extract();">
<OPTION>ALL</option> <OPTION>opt1</option>
<option>opt2</option>
</select>



<select name=cny2 size="1"
style="backgroundcolor:#ffffcc;">

<option value="1"> 1 </option>
<option value="2"> 2 </option>
<option value="3"> 3 </option>

</select>

</form>


  Multiple Options from one SELECT to another  Troy Wolf at 22:09 on Thursday, September 25, 2003
 

Here is a sample HTML page that I believe will show you the techniques to accomplish your goal. Simply copy and paste this code as a new HTML file, then run it. Unfortunately, the loss of tabs will make the code difficult to read. I suggest you take the time to reformat the code by adding tabs inside the functions, loops, and if/else statements.
<style>
td
{
font-family:Verdana;
font-size:8pt;
}
.ddStyle
{
width:150px;
font-family:Verdana;
font-size:8pt;
}
.butStyle
{
width:40px;
font-family:Verdana;
font-size:8pt;
}
</style>
<script language=javascript>
var f;
function MoveValues(x,moveAll)
{
if(x==0)
{
ddFrom = f.SelectedOptions;
ddTo = f.AvailableOptions;
}
else
{
ddFrom = f.AvailableOptions;
ddTo = f.SelectedOptions;
}
for(idx=0;idx<ddFrom.options.length;idx++)
{
//alert("length: "+ddFrom.options.length+"\nidx: " + idx +"\nValue: "+ddFrom.options[idx].value);
if(moveAll || ddFrom.options[idx].selected)
{
wrkVal = ddFrom.options[idx].value;
wrkText = ddFrom.options[idx].text;
var objOption = document.createElement("OPTION");
ddTo.options.add(objOption);
ddTo.options[ddTo.options.length-1].value = wrkVal;
ddTo.options[ddTo.options.length-1].text = wrkText;
ddFrom.options.remove(idx);
idx--;
}
}
}
function LoadTrigger()
{
f = document.forms[0];
}
window.onload = LoadTrigger;
</script>
<form>
<table>
<tr>
<td valign=top align=center>
<select class=ddStyle name=AvailableOptions size=7 MULTIPLE>
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="yellow">yellow</option>
<option value="orange">orange</option>
</select>
</td>
<td width=50 align=center valign=middle>
<input class=butStyle type=button value=" > " onclick=MoveValues(1,false)><br>
<input class=butStyle type=button value=" < " onclick=MoveValues(0,false)><p>
<input class=butStyle type=button value=" >> " onclick=MoveValues(1,true)><br>
<input class=butStyle type=button value=" << " onclick=MoveValues(0,true)>
</td>
<td valign=top align=center>
<select class=ddStyle name=SelectedOptions size=7 MULTIPLE>
<option value="purple">purple</option>
</select>
</td>
</tr>
</table>
</form>


<Added>

I should add that this solution does not work in Netscape Navigator 7.0. I don't know about any other versions. If any of you forum visitors have other versions of Netscape, try this code snippet and let me know.

I hope this is not a stumbling block to you.
Troy Wolf: site expert
SnippetEdit Website Editor


  Re: Dynamic dropdown list  stevenson at 09:08 on Tuesday, December 09, 2003
 

I have tried using your example i.e.

var oNewOption = document.createElement("OPTION");
oDestination.options.add(oNewOption);
oNewOption.text = "Two";
oNewOption.value = "2";

But am getting the following js error message:

<><><<><><<><><<
Invalid Argument
<><><<><><<><><<

Also on using:
oDestination.options[ oDestination.options.length ] = new Option( "Two", "2")

I get the following js error message:
<><><<><><<><><<<><><<><><<><><<<><><<><><<><><<
Object doesn't support this property or method
<><><<><><<><><<<><><<><><<><><<<><><<><><<><><<


on using:

oDestination.options.length = oDestination.options.length + 1;
oDestination.options[ Destination.options.length ].value = "2";
oDestination.options[ oDestination.options.length ].text = "Two2";

I get the following js error message:
<><><<><><<><><<<><><<><><<><><<<><><<><><<><><<
'options[...]' null or not an object
<><><<><><<><><<<><><<><><<><><<<><><<><><<><><<

What's wrong with my code given that all this are done on an IFRAME?

  Re: Dynamic dropdown list  Troy Wolf at 14:49 on Tuesday, December 09, 2003
 

Stevenson, this sort of thing happens to me all the time--I start with working code, start adjusting to my liking and end up with errors. Of course at first I look for the obvious things, but often I find myself frustrated after an hour of struggling to find the problem. What you have to do in these situations is go back to the working model and start from there. The code example I posted that is contained in the yellowish box is a complete working example. Copy that exactly and paste into a new text file. Name the file with a .html extension, then open it in your browser. If you get errors, then there is something about your particular OS and/or browser that is incompatible with the script. The script is tested in IE6, but should work fine in IE5.5 as well--maybe 5.0, but I don't know anymore. I haven't tested it in any other browsers. If it works, then copy that file to a new file, and start your tweaking--one small change at a time. Make sure it works after every change. JavaScript, in my opinion, is one of the most difficult languages to debug. An error on "line 27" may have nothing to do with line 27, but rather a missing semicolon 5 lines previously! So start with a working model, then take baby steps. Hope this helps.
Troy Wolf: site expert
SnippetEdit Website Editor









CodeToad Experts

Can't find the answer?
Our Site experts are answering questions for free in the CodeToad forums








Recent Forum Threads
•  do static member are inherited
•  Re: Help with Using DataReader with StoredProcedure
•  Perl Script Output (w3c validator)
•  Re: HashMap question
•  focus management?
•  Looping Issue...Please help!
•  regarding hibernate
•  working with plugins
•  Checkbox Validation help.


Recent Articles
What is a pointer in C?
Multiple submit buttons with form validation
Understanding Hibernate ORM for Java/J2EE
HTTP screen-scraping and caching
a javascript calculator
A simple way to JTable
Java Native Interface (JNI)
Parsing Dynamic Layouts
MagicGrid
Caching With ASP.Net


© Copyright codetoad.com 2001-2006