...

View Full Version : Dynamically Generated Drop-Down Menu



KyleVA
06-01-2009, 09:11 PM
Okay, I'm just having trouble doing this. Does anyone know a decent way to create a dynamically generated drop-down menu? I'm using a MIVA storefront and within a product are drop-downs with product-specific attributes. I'd like to have two drop-downs on a product page of which only one needs to be dynamically generated and the other is static.

The second drop-down's contents are dependent on the selection in the top drop down. You have a static drop-down that contains X and G. The second drop-down will only display options that correspond to your selection of X or G on the first drop-down.

Making a completely static version of this isn't the problem. I'm having trouble pulling the value of the original form options. The options are always going to be divided amongst either having a 'X' or 'G' value in the option value.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function dropdownlist(listname)
{
var elem = document.getElementById("selection");
var attrs = elem.length;
for (i = 1;i < attrs;i++) {
var pvalue[i] = elem.options[i].value;
}
switch (listname)
{
case "X" :
elem.options[0]=new Option("Select Sub-Category","");
for (i = 1; i < attrs; i++) {
if (pvalue[i].indexOf("X")!=-1) {
elem.options[i]=new Option("&mvt:option:prompt;","&mvt:option:code;");
}
}
break;
case "G" :
elem.options[0]=new Option("Select Sub-Category","");
for (i = 1; i < attrs; i++) {
if (pvalue[i].indexOf("G")!=-1) {
elem.options[i]=new Option("&mvt:option:prompt;","&mvt:option:code;");
}
}
}
return true;
}

</script>
</head>
<title></title>
<body>
<form id="form" name="form" method="post">
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category :</td>
<td width="59%" align="left" valign="middle"><select name="category" id="category" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Category</option>
<option value="X">X</option>
<option value="G">G</option>
</select></td>
</tr>
<tr>
<td align="right" valign="middle">Sub Category :
</td>
<td align="left" valign="middle">
<select name="subcategory" id="selection">
<option value="on">Select Sub-Category</option>
<option value="0968X">Product</option>
<option value="0969X">Product</option>
<option value="0970X">Product</option>
<option value="0968G">Product</option>
<option value="0969G">Product</option>
<option value="0970G">Product</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>

jmrker
06-01-2009, 11:26 PM
See if this works a little better for you: :)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
// From: http://codingforums.com/showthread.php?t=167810

var ProductX = ['Select Sub-Category',"0968X","0969X","0970X"];
var ProductG = ['Select Sub-Category',"0968G","0969G","0970G"];

function dropdownlist(listname) {
var elem = document.getElementById("selection");
var PArray = new Array();
if (listname == '') { alert('No selection'); PArray = ['Catagory missing']; }
if (listname == 'X') { PArray = ProductX; }
if (listname == 'G') { PArray = ProductG; }
elem.options.length = 0;
for (i=0; i<PArray.length; i++) {
// elem.options[i]=new Option("&mvt:option:prompt;","&mvt:option:code;"); // don't know what this is from original
if (i == 0) {
elem.options[elem.options.length] = new Option(PArray[i],'on');
} else {
elem.options[elem.options.length] = new Option('Product '+PArray[i],PArray[i]);
}
}
return true;
}

</script>
<title>Title goes in head section</title>
</head>
<body>
<form id="form" name="form" method="post" onsubmit="return false">
<table width="50%" border="0" cellspacing="0" cellpadding="5">
<tr>
<td width="41%" align="right" valign="middle">Category :</td>
<td width="59%" align="left" valign="middle">
<select name="category" id="category"
onchange="dropdownlist(this.options[this.selectedIndex].value);">
<option value="">Select Category</option>
<option value="X">X</option>
<option value="G">G</option>
</select>
</td>
</tr>

<tr>
<td align="right" valign="middle">Sub Category :</td>
<td align="left" valign="middle">
<select name="subcategory" id="selection">
<option value="on">Sub-Category</option>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>

Good Luck!

KyleVA
06-02-2009, 01:09 AM
I appreciate the help - but this isn't exactly what I'm looking for. I need the JavaScript to pull the information from a <select> on the page. The options contained in the second drop-down are going to be defined in the back end.

An example of the drop-down produced by the system i'm using:


<option value="0001S">Product Description S</option>
<option value="0002S">Product Description S</option>
<option value="0003S">Product Description S</option>
<option value="0004S">Product Description S</option>
<option value="0001G">Product Description S</option>
<option value="0002G">Product Description S</option>
<option value="0003G">Product Description S</option>
<option value="0004G">Product Description S</option>

The value's are going to be consistently named so that they're separated by 'S' and 'G'. I'm trying to have the first drop-down narrow down the selections in the second drop-down depending on whether they contain a 'S' or a 'G' in the value. For example - the first drop-down could have the two options 'S' and 'G'.

And just trying to be sure I'm being clear. The arrays need to be generated by the select element's markup on page load. I appreciate you taking the time you already have to help.

jmrker
06-02-2009, 05:51 AM
Your request still is not clear to me. :confused:

Can you give an example of what the select boxes should contain at:
1. First load of script
2. After selection of 'X' or 'S'
3. After selection of 'G'

And what do you mean by 'defined in the back end'. :eek:
Are you loading information to display using some type of AJAX command?

vwphillips
06-02-2009, 12:26 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Sort(s1,s2){
s1=document.getElementById(s1);
var opts=s1.options;
for (var ary=[[],[]],z0=0;z0<s1.options.length;z0++){
ary[s1.options[z0].value.indexOf('S')>-1?0:1].push(s1.options[z0]);
}
while (s1.firstChild) s1.removeChild(s1.firstChild);
s1.options[0]=new Option('S','');
s1.options[1]=new Option('G','');
s1.selectedIndex=0;
s1.onchange=function(){ Populate(s1,document.getElementById(s2),ary); }
Populate(s1,document.getElementById(s2),ary);
}

function Populate(s1,s2,ary){
ary=ary[s1.selectedIndex];
while (s2.firstChild) s2.removeChild(s2.firstChild);
for (var z0=0;z0<ary.length;z0++){
s2.appendChild(ary[z0]);
}
}

/*]]>*/
</script>
</head>

<body onload="Sort('S1','S2');" >

<select id="S1" >
<option value="0001S">Product Description S</option>
<option value="0002S">Product Description S</option>
<option value="0003S">Product Description S</option>
<option value="0004S">Product Description S</option>
<option value="0001G">Product Description G</option>
<option value="0002G">Product Description G</option>
<option value="0003G">Product Description G</option>
<option value="0004G">Product Description G</option>
<option value="0004G">Product Description G</option>
</select>
<select id="S2" ></select>

</body>

</html>

vwphillips
06-03-2009, 11:50 AM
from PM


Thanks a lot for your help. I was curious, I tinkered with it but was unable to get it (I'm very new to JS). If I wanted to add a 'select one' option to the S and G drop-down. How would I do that?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Sort(s1,s2){
s1=document.getElementById(s1);
var opts=s1.options;
for (var ary=[[],[]],z0=0;z0<s1.options.length;z0++){
ary[s1.options[z0].value.indexOf('S')>-1?0:1].push(s1.options[z0]);
}
while (s1.firstChild) s1.removeChild(s1.firstChild);
s1.options[0]=new Option('Select One','');
s1.options[1]=new Option('S','');
s1.options[2]=new Option('G','');
s1.selectedIndex=0;
s1.onchange=function(){ Populate(s1,document.getElementById(s2),ary); }
Populate(s1,document.getElementById(s2),ary);
}

function Populate(s1,s2,ary){
if (ary[s1.selectedIndex-1]){
ary=ary[s1.selectedIndex-1];
while (s2.firstChild) s2.removeChild(s2.firstChild);
for (var z0=0;z0<ary.length;z0++){
s2.appendChild(ary[z0]);
}
}
}
/*]]>*/
</script>
</head>

<body onload="Sort('S1','S2');" >

<select id="S1" >
<option value="0001S">Product Description S</option>
<option value="0002S">Product Description S</option>
<option value="0003S">Product Description S</option>
<option value="0004S">Product Description S</option>
<option value="0001G">Product Description G</option>
<option value="0002G">Product Description G</option>
<option value="0003G">Product Description G</option>
<option value="0004G">Product Description G</option>
<option value="0004G">Product Description G</option>
</select>
<select id="S2" ></select>

</body>

</html>

KyleVA
06-03-2009, 03:42 PM
I don't know what I'm doing wrong. I can't figure out how to have the product description drop-down disabled until a selection is made on the first drop-down? And then if you go back to 'SELECT ONE' on the first drop-down it disables the second drop-down once again. Here's what I've tried.


<html>
<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Sort(s1,s2){
document.getElementById("s2").disabled = true; // Attempting to disable the second drop-down (contains the product descriptions) on page load. (edit. Haha, it's the variable s2.. Dang, I'm still having some trouble getting this to work though.)
s1=document.getElementById(s1);
var opts=s1.options;
for (var ary=[[],[]],z0=0;z0<s1.options.length;z0++){
ary[s1.options[z0].value.indexOf('S')>-1?0:1].push(s1.options[z0]);
}
while (s1.firstChild) s1.removeChild(s1.firstChild);
s1.options[0]=new Option('Select One','');
s1.options[1]=new Option('Sterling Silver','');
s1.options[2]=new Option('14K Gold','');
s1.selectedIndex=0;
s1.onchange=function(){ Populate(s1,document.getElementById(s2),ary); }
Populate(s1,document.getElementById(s2),ary);
}
function Populate(s1,s2,ary){
if (ary[s1.selectedIndex-1]){
ary=ary[s1.selectedIndex-1];
while (s2.firstChild) s2.removeChild(s2.firstChild);
for (var z0=0;z0<ary.length;z0++){
s2.appendChild(ary[z0]);
}
}
s2.selectedIndex = 0;
}

function selection(sindex) {
var ele = document.getElementById("S2");
if (sindex == 1 | sindex == 2) { // Attempting to have it so when you select the second or third option on the first (S or G) drop-down the menu is enabled.
ele.disabled = false;
}
else { // If any other option is selected on the first drop-down (only other option is the select one which is 0) it will disable the second drop-down once again.
ele.disabled = true;
}
}

/*]]>*/
</script>
</head>

<body onload="Sort('S1','S2');" >

<select id="S1" onchange="selection(this.selectedIndex);">
<option value="Selected">SELECT ONE</option>
<option value="0001S">Product Description S</option>
<option value="0002S">Product Description S</option>
<option value="0003S">Product Description S</option>
<option value="0004S">Product Description S</option>
<option value="on">SELECT ONE</option>
<option value="0001G">Product Description G</option>
<option value="0002G">Product Description G</option>
<option value="0003G">Product Description G</option>
<option value="0004G">Product Description G</option>
</select>
<select id="S2"></select>

</body>

</html>

vwphillips
06-03-2009, 05:47 PM
<html>
<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Sort(s1,s2){
document.getElementById("s2").disabled = true; // Attempting to disable the second drop-down (contains the product descriptions) on page load. (edit. Haha, it's the variable s2.. Dang, I'm still having some trouble getting this to work though.)
s1=document.getElementById(s1);
var opts=s1.options;
for (var ary=[[],[]],z0=0;z0<s1.options.length;z0++){
ary[s1.options[z0].value.indexOf('S')>-1?0:1].push(s1.options[z0]);
}
while (s1.firstChild) s1.removeChild(s1.firstChild);
s1.options[0]=new Option('Select One','');
s1.options[1]=new Option('Sterling Silver','');
s1.options[2]=new Option('14K Gold','');
s1.selectedIndex=0;
s1.onchange=function(){ Populate(s1,document.getElementById(s2),ary); }
Populate(s1,document.getElementById(s2),ary);
}
function Populate(s1,s2,ary){
s2.setAttribute('disabled','disabled');
if (ary[s1.selectedIndex-1]){
ary=ary[s1.selectedIndex-1];
while (s2.firstChild) s2.removeChild(s2.firstChild);
for (var z0=0;z0<ary.length;z0++) s2.appendChild(ary[z0]);
s2.removeAttribute('disabled');
}
s2.selectedIndex=0;
}


/*]]>*/
</script>
</head>

<body onload="Sort('S1','S2');" >

<select id="S1">
<option value="Selected">SELECT ONE</option>
<option value="0001S">Product Description S</option>
<option value="0002S">Product Description S</option>
<option value="0003S">Product Description S</option>
<option value="0004S">Product Description S</option>
<option value="on">SELECT ONE</option>
<option value="0001G">Product Description G</option>
<option value="0002G">Product Description G</option>
<option value="0003G">Product Description G</option>
<option value="0004G">Product Description G</option>
</select>
<select id="S2"></select>

</body>

</html>

KyleVA
06-03-2009, 07:22 PM
<script type="text/javascript">
/*<![CDATA[*/

function Sort(s1,s2){
s1=document.getElementById(s1);
var selectionWidth = s1.offsetWidth; // getting width when drop-down contains option with most characters
s2=document.getElementById(s2); // declaring variable
s2.style.width = selectionWidth; // setting s2 width to the maximum width of the drop-down regardless of selection is first drop down
var opts=s1.options;
for (var ary=[[],[]],z0=0;z0<s1.options.length;z0++){
ary[s1.options[z0].value.indexOf('S')>-1?0:1].push(s1.options[z0]);
}
while (s1.firstChild) s1.removeChild(s1.firstChild);
s1.options[0]=new Option('Select One','');
s1.options[1]=new Option('Sterling Silver','');
s1.options[2]=new Option('14K Gold','');
s1.selectedIndex=0;
s1.onchange=function(){ Populate(s1,document.getElementById(s2),ary); }
Populate(s1,document.getElementById(s2),ary);
}
function Populate(s1,s2,ary){
s2.setAttribute('disabled','disabled');
if (ary[s1.selectedIndex-1]){
ary=ary[s1.selectedIndex-1];
while (s2.firstChild) s2.removeChild(s2.firstChild);
for (var z0=0;z0<ary.length;z0++) s2.appendChild(ary[z0]);
s2.removeAttribute('disabled');
}
s2.selectedIndex=0;
}


/*]]>*/
</script>

Lastly, haha. And thanks so much for your help. How can I make it so the second drop-down won't have vary it's size depending on the options listed in the select element? I'm just trying to get the maximum width of S1 (width of select on page load) and keep that permanently applied to s2 so that it won't change width according to it's options, since it's always at the maximum. Take a look at what I was trying to do if my description is unclear and you should be able to see what I was trying to do.

vwphillips
06-04-2009, 03:24 PM
<select id="S2" style="width:100px;" ></select>

KyleVA
06-04-2009, 03:29 PM
<select id="S2" style="width:100px;" ></select>


The problem with that solution is that it will ALWAYS have the same width from page to page. This drop-down menu is going to have varying contents page to page but is going to be using the same template. Meaning on one page the drop-down may have the options: Option1, Option2, Option3, Option4. Another page may have the options: This is the Option1, This is the Option2, This is the Option3 (and of course the width is going to have to be greater for this page).

I'm just trying to make it so on the page load, get the width of the S1 drop-down with all the options still there. And then apply that width to the S2 drop-down - and keep that width constant no matter what is selected in the S1 drop-down.

Note: I'm trying to avoid the S2 drop-down flexing in width depending on the selection in the first drop-down (S1). Also trying to avoid the S2 drop-down having no width on page load.

I'm also curious if it's possible append to the top of the 'S' S2, an option on the top that says SELECT ONE?


<script type="text/javascript">
/*<![CDATA[*/

function Sort(s1,s2){
s1=document.getElementById(s1);
var selectionWidth = s1.offsetWidth;
document.getElementById("S2").style.width = selectionWidth; // Setting width to selectionWidth (should be the width of S1 @ pageload before script! Don't know why it doesn't work)
var opts=s1.options;
for (var ary=[[],[]],z0=0;z0<s1.options.length;z0++){
ary[s1.options[z0].value.indexOf('S')>-1?0:1].push(s1.options[z0]);
}
while (s1.firstChild) s1.removeChild(s1.firstChild);
s1.options[0]=new Option('Select One','');
s1.options[1]=new Option('Sterling Silver','');
s1.options[2]=new Option('14K Gold','');
s1.selectedIndex=0;
s1.onchange=function(){ Populate(s1,document.getElementById(s2),ary); }
Populate(s1,document.getElementById(s2),ary);
}
function Populate(s1,s2,ary){
s2.setAttribute('disabled','disabled');
if (ary[s1.selectedIndex-1]){
ary=ary[s1.selectedIndex-1];
while (s2.firstChild) s2.removeChild(s2.firstChild);
for (var z0=0;z0<ary.length;z0++) s2.appendChild(ary[z0]);
s2.removeAttribute('disabled');
}
s2.selectedIndex=0;
}


/*]]>*/
</script>

vwphillips
06-05-2009, 05:25 PM
this is near the same as you had so I may have lost the plot


<html>
<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/

function Sort(s1,s2){
s1=document.getElementById(s1);
s2=document.getElementById(s2);
s2.style.width=s1.offsetWidth+'px';
var opts=s1.options;
for (var ary=[[],[]],z0=0;z0<s1.options.length;z0++){
ary[s1.options[z0].value.indexOf('S')>-1?0:1].push(s1.options[z0]);
}
while (s1.firstChild) s1.removeChild(s1.firstChild);
s1.options[0]=new Option('Select One','');
s1.options[1]=new Option('Sterling Silver','');
s1.options[2]=new Option('14K Gold','');
s1.selectedIndex=0;
s1.onchange=function(){ Populate(s1,s2,ary); }
Populate(s1,s2,ary);
}
function Populate(s1,s2,ary){
s2.setAttribute('disabled','disabled');
if (ary[s1.selectedIndex-1]){
ary=ary[s1.selectedIndex-1];
while (s2.firstChild) s2.removeChild(s2.firstChild);
for (var z0=0;z0<ary.length;z0++) s2.appendChild(ary[z0]);
s2.removeAttribute('disabled');
}
s2.selectedIndex=0;
}


/*]]>*/
</script>
</head>

<body onload="Sort('S1','S2');" >

<select id="S1">
<option value="Selected">SELECT ONE</option>
<option value="0001S">Product Description S</option>
<option value="0002S">Product Description S</option>
<option value="0003S">Product Description S</option>
<option value="0004S">Product Description S</option>
<option value="on">SELECT ONE</option>
<option value="0001G">Product Description G</option>
<option value="0002G">Product Description G</option>
<option value="0003G">Product Description G</option>
<option value="0004G">Product Description G</option>
</select>
<select id="S2"></select>

</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum