|
JavaScript - Dependent Drop-down With Selections In An Array
Hullo again, CF.com,
So, now I have a curious question on arrays, selections, options and the like. My current project is available for perusal in order to assist me at: http://www.projectvoid.co.uk/ As you can see, I make it so that once the product type is selected, you can then select a wattage. This dependent drop-down works, however I want it so that when I select a value in the left-hand side (wattage), then the one on the right will offer a pre-defined value that replaces the wattage I have. For example, a GU-10 in 'Type of Lamp' offers a 50, 35 and 20 watt bulb in 'Current Lighting Products'. In 'Energy Efficient Products', it offers 5 and 3. I wish to make a statement somewhere so that if they select 50 on the left, it selects 5 on the right. If they select 35 on the left, it select 3 on the right. I would also like it to do multiple offers, so that if they select say, a 35 of the MR-16, I want the right hand side to offer both 5 and 3. The only way I can think of doing this is via a lot of 'IF' statements. Is there a quicker way to do this? Please assist and, if it's not too much to ask, could you comment the code? Thank you! Similar TutorialsHi everyone, I'm new here, I actually found this site by searching for the code I have a question for. I'm trying to show/hide different drop down selectors, depending on what is chosen in another drop down selector. I modified a script (I found he http://www.codingforums.com/showthread.php?t=98406) in a way that I thought would work, but its not. Can anyone help me with what I'm doing wrong? Here is my page: http://www.leatherexpressonline.com/...er/testing.php Here is my javascript: http://pastie.org/3344253 And my drop downs: http://pastie.org/3344258 Also, I don't want the drop downs (ids: grade1000color, grade1500color, grade2000color, grade2500color, grade3000color, grade5000color) to be shown when the page is first loaded. Only when the correct option is chosen on the drop down. So I'm guessing I should add a display:none style to those drop downs, then have them shown on the javascript? Thanks so much for the help Okay, I'm having some trouble getting my head around how to do this.. Code: <select> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> </select> <select> <option value="Rhino">Rhino</option> <option value="Bird">Bird</option> <option value="Rooster">Rooster</option> </select> <select> <option value="0202A">Rhino - Text</option> <option value="0203A">Rhino - Text2</option> <option value="0204A">Bird - Text1</option> <option value="0205A">Bird - Text2</option> <option value="0202B">Rhino - Text</option> <option value="0204B">Rhino - Text2</option> <option value="0204C">Rooster - Text1</option> <option value="0205C">Rooster - Text2</option> <option value="0206C">Rooster - Text3</option> </select> So say we had those three drop-downs. I'm looking to make it so that second drop-down only has options corresponding to a relationship between the first and the third drop-down. Example - if you select A in the first drop-down you only see Rhino and Bird in the second drop-down. If you select B you will only see Rhino in the second drop-down. Lastly, if you select C you will only see Rooster in the second drop-down. Just can't figure this out. >.< I have a vertical menu in which the sub menu is a box that pops out to the right and the user can click boxes to make selections (input check boxes). I would like some way to indicate to the user after they have left the sub menu, that they have made selections within that sub menu. Perhaps a number after the menu item name, in which the number of sub menu selections are indicated in parenthesis? Is this possible? Dear all, Below the html and java code. After viewing using Internet Explorer, I did a selection from the autodropdown. Then I click on Click here to go to other page . You will see a quite different webpage. Then I click on the back button, in the left upper corner of IE window, so I see the previous webpage but.... the autodropdown does not remember my selection . How can we solve this? <html> <Head> <Script Language=JavaScript> Level1 = new Array("Ceramics","Chemicals") Ceramics = new Array("ELECTRONICS","ENVIRONMENTAL") Chemicals = new Array("METALLIC_SOAPS","OLEOCHEMICAL_DERIVATIVES") ELECTRONICS = new Array("Solder mask") ENVIRONMENTAL = new Array("Catalysts") METALLIC_SOAPS = new Array("Soap","Translucent soaps","Liquid soa[") OLEOCHEMICAL_DERIVATIVES = new Array("FA-pos","FA polfaideriv") function fillSelect(isValue,isNext){ isNext.style.display = ""; isNext.length = 1; curr = eval(isValue); for (each in curr) { isData = new Option(curr[each],curr[each]); isNext.add(isData,isNext.options.length); } } function getValue(isValue){ } </Script> </Head> <body> <center> <h4>Dependent Select List, within a form</h4> <Form name='Categories'> <p>Segment <Select name='List1' onChange="fillSelect(this.value,Categories.List2)"> <option selected>Make a selection</option> </Select> </p> <Select name='List2' onChange="fillSelect(this.value,Categories.List3)"> <option selected>Make a selection</option> </Select> <p></p> <Select name='List3' onChange="getValue(this.value)"> <option selected >Make a selection</option> </Select> </Form> </center> <Script> fillSelect('Level1',Categories.List1) Categories.List2.style.display = "none"; Categories.List3.style.display = "none"; </Script> <p>Click <a href="http://www.hetnet.nl">here</a> to go to other page</p> </body> </html> Hi all, I am in the process of developing a calculator for some of my colleagues to use. One of the variables within the calculations is called PMH. I want to determine the value of PMH based on which checkboxes are ticked. Each checkbox has a different value. If the checkbox is not ticked, then the value of each option is 1 and obviously more than one checkbox may be ticked. I have created the checbox code: Code: <td><input type="checkbox" name="PMH" value="1.6" /> Smoker<br />
<input type="checkbox" name="PMH" value="0.4" /> CCF<br />
<input type="checkbox" name="PMH" value="0.5" /> Pulmonary Oedema / Cirrhosis<br />
<input type="checkbox" name="PMH" value="0.8" /> COAD<br /></td>
but I have no idea on how to calculate what I need for var PMH. Can someone guide me as to what I need to do please? Cheers, mads I had a different question that no one seemed to be able to answer here, so I found a different way of approaching the situation. I need to make an element in JS, then display it in a place (preferably in a position right after the selected text on the page using getSelection) or, in a fixed position. For some reason, this code won't work in FF3.5 (Win7) or Chrome although the basic stuff was taken straight from Mozilla's website: Code: function showSelectBox(){
var textlength = text.length;
var element = document.createElement('div');
element.setAttribute('id','select');
element.innerHTML = textlength+"/140<div id=\"t-icon\"><a href=\"#\" onclick=\"emptySelection();\"><img src=\"imgs/t-icon.gif\" /></a></div>";
}
Hello, I need some help! I have some code that has a comments box and 2 radio buttons that ask if you want to be contacted about your comments. If you select "Yes", you get another set of radio buttons that ask you to choose a method of contact. When you choose a method, that selected methods value is parsed to the top of the textarea field, placing the comment below. I pretty much have it working, however, if I enter a comment in the "Comments" field, select "Yes", then select "email" and change to "Phone Morning", it concatnates the values in the textarea box instead of replacing the contact method value while still retaining the comment entered below. Also, if at all possible, I wanted to clear only the contact method value out of the textarea field and leave only the comment when you go back and click the "No" radio button. Can anyone please help? Thanks in advance! Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type='text/javascript'>
function showContactType(obj){
if(document.storeCodeFeedbackForm.contact[1].checked == true){
document.getElementById("contactType").style.display = 'inline';
}else if(document.storeCodeFeedbackForm.contact[0].checked == true){
for(i=0;i<document.storeCodeFeedbackForm.contactType.length;i++){
document.storeCodeFeedbackForm.contactType[i].checked = false;
}
document.getElementById("contactType").style.display = 'none';
}
}
function printContactType(src)
{
if(src.checked)
document.storeCodeFeedbackForm.customerMessage.value = src.value + "\n" + "------------------------" + "\n\n" + document.storeCodeFeedbackForm.customerMessage.value;
document.storeCodeFeedbackForm.customerMessage.focus();
}
</script>
</head>
<body>
<form name="storeCodeFeedbackForm">
<table>
<tr>
<td>Comments:<br />
<textarea id='textArea' name="customerMessage" cols="30" rows="10"></textarea>
<br />
</td>
</tr>
<tr>
<td> Would you like to be contacted about your comments? <span style="color:#990000; font-weight:normal">*</span>
<input type="radio" name="contact" value="no" onclick="showContactType(this);disableField(this);">
No
<input type="radio" name="contact" value="yes" onclick="showContactType(this)">
Yes </td>
</tr>
<tr>
<td><table cellpadding="0" cellspacing="0" border="0" width="100%" id="contactType" style="display:none">
<tr>
<td class="tir" style="border-top:1px dashed #cccccc; padding-top:5px;">(Choose One)<span style="color:#990000">*</span>
<input type="radio" name="contactType" value="Contact me by: e-Mail" onClick='printContactType(this);'>
e-Mail
<input type="radio" name="contactType" value="Contact me by: phone in the morning" onClick='printContactType(this);'>
Phone Morning
<input type="radio" name="contactType" value="Contact me by: phone in the afternoon" onClick='printContactType(this);'>
Phone Afternoon
<input type="radio" name="contactType" value="Contact me by: phone in the evening" onClick='printContactType(this);'>
Phone Evening</td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>
Hi, I'm learning javascript and not sure what the script language is capable of. Is there a way to make radio button selections appear in a second popup window? Example: user selects various options from a page then clicks button to open a second window with select options showing up in list. Thanks for reading this. Good day. This form is working, but I want to make the "What AIS services are you interested in?" multiple selection a "required field". The other required fields are working, but I can't figure out how to make this field "required". Code: <blockquote><h2>Request More Information:</h2>
<script type="text/javascript">
function MM_validateForm() { //v4.0
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
} }
</script>
<form action="https://www.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8" method="POST" onsubmit="MM_validateForm('first_name','','R','last_name','','R','email','','RisEmail','company','','R','phone','','RisNum');return document.MM_returnValue"><input type="hidden" name="oid" value="00Dd0000000cnUc" />
<input type="hidden" name="retURL" value="http://aissolutions.ca/thank-you" />
<p style="float:left;width:350px"><label for="first_name">First Name <span style="color:#f00">(required)</span></label><input id="first_name" type="text" name="first_name" size="50" maxlength="40" /></p>
<p style="float:left;width:350px"><label for="last_name">Last Name <span style="color:#f00">(required)</span></label><input id="last_name" type="text" name="last_name" size="50" maxlength="80" /></p>
<p style="float:left;width:350px"><label for="email">Email <span style="color:#f00">(required)</span></label><input id="email" type="text" name="email" size="50" maxlength="80" /></p>
<p style="float:left;width:350px"><label for="company">Company <span style="color:#f00">(required)</span></label><input id="company" type="text" name="company" size="50" maxlength="40" /></p>
<p style="float:left;width:350px"><label for="phone">Phone <span style="color:#f00">(required)</span></label><input id="phone" type="text" name="phone" size="50" maxlength="40" /></p>
<p style="float:left;width:350px">Best Time To Call:<select style="width:325px" id="00Nd0000004F2Mb" name="00Nd0000004F2Mb" title="Best Time To Call"><option value="">--None--</option><option value="9:00am to 12:00pm">9:00am to 12:00pm</option>
<option value="1:00pm to 5:00pm">1:00pm to 5:00pm</option>
<option value="6:00pm to 9:00pm">6:00pm to 9:00pm</option>
</select></p>
<p style="clear:left;float:left;width:350px"><label for="street">Address</label><br>
<textarea name="street" cols="47"></textarea></p>
<p style="float:left;width:350px">What AIS services are you interested in?:<select style="width:325px" id="00Nd00000043aHr" multiple="multiple" name="00Nd00000043aHr" title="What AIS services are you interested in?"><option value="Bookkeeping">Bookkeeping</option>
<option value="Business Incorporation">Business Incorporation</option>
<option value="Catch Up/Clean Up Records">Catch Up/Clean Up Records</option>
<option value="Job Costing">Job Costing</option>
<option value="Part Time CFO">Part Time CFO</option>
<option value="Software Conversion">Software Conversion</option>
<option value="Software Customization">Software Customization</option>
<option value="Software Training">Software Training</option>
<option value="Tax Services">Tax Services</option>
</select></p>
<p style="float:left;width:350px">Anything else you think we should know:<br>
<textarea id="00Nd0000004E2rs" name="00Nd0000004E2rs" cols="47"></textarea></p>
<p style="clear:left;float:left"><input type="submit" name="submit" /></p>
Thanks. I have the below code i been trying to figure out how to reset the font changes made without having to refresh the website (f5). Currently I have created a button that onClick uses history.go(0) which refreshes the page removing the font changes. I would like help with figuring out a solution to reset (remove font) step1-5 without having to refresh the page. Thanks. Preview of Code Code: <html>
<head>
<title>My Title Page</title>
<script type="text/javascript">
function selectTextArea()
{
document.FormTextArea.TextAreaBox.select();
document.FormTextArea.TextAreaBox.focus();
}
function changeStepColor(id)
{
document.getElementById(id).style.font="italic bold 15px arial,serif";
}
function inputPrompt(String , msg)
{
String=prompt(msg, "");
if (String!=null && String!="")
{
document.FormTextArea.TextAreaBox.value=document.FormTextArea.TextAreaBox.value + msg + ' ' + String + '\r' +
'----------------------------------' + '\r'
}
else
{
document.FormTextArea.TextAreaBox.value=document.FormTextArea.TextAreaBox.value + msg + ' N/A' + '\r' +
'----------------------------------' + '\r'
}
}
</script>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="2" width="100%">
<tr>
<td width="50%" align="center" valign="top">
<form name="FormTextArea">
<textarea name="TextAreaBox" cols="40" rows="12" wrap="virtual"></textarea>
</form>
</td>
<td width="50%" valign="top">
<font size="2" id="step1">1. Step One</font>
<input type="button" value="Input" onclick="inputPrompt('a', 'Step 1:'); changeStepColor('step1');" /><br />
<font size="2" id="step2">2. Step Two</font>
<input type="button" value="Input" onclick="inputPrompt('a', 'Step 2:'); changeStepColor('step2');" /><br />
<font size="2" id="step3">3. Step Three</font>
<input type="button" value="Input" onclick="inputPrompt('a', 'Step 3:'); changeStepColor('step3');" /><br />
<font size="2" id="step4">4. Step Four</font>
<input type="button" value="Input" onclick="inputPrompt('a', 'Step 4:'); changeStepColor('step4');" /><br />
<font size="2" id="step5">5. Step Five</font>
<input type="button" value="Input" onclick="inputPrompt('a', 'Step 5:'); changeStepColor('step5');" />
</td>
</tr>
<tr>
<td width="50%" align="center" valign="top">
<input type="button" value="Select Text Area" onClick="selectTextArea()" />
<input type="button" value="Clear Text Area" onClick="document.FormTextArea.TextAreaBox.value=''; history.go(0)" />
</td>
<td width="50%" align="center" valign="top">
 
</td>
</tr>
</table>
</body>
</html>
hello guys! I need help setting up a form, I want to do some pretty neat things: It will say: What countries do you want to visit? [FIELD] Part 1: I want that when a user starts typing into the field, it will suggest under things that match what you have typed so far, sort of like facebook search does. So I would need a list of recognized country names. Now for example imagine I was using this, and I typed in M, it would list under a max of 5 valid entries begining with M, if I typed in Me, it would list the ones begining with Me, if I typed in Mex, it would show Mexico. Now the user would have to click this drop down suggestion to choose it. Part2: I want once a user clicks on a suggestion, it will "pop under" the input box or somewhere, with a "x" beside it to remove it. The user can now type in another country, and when it is clicked it too appears as a sort of "icon" under the input box or somewhere, with an "x" beside it. Clicking the x removes the country from the current list of countries. Once he is done, he goes on to other fields and the selected countries remain visible. Once a user submits the form, I want to get only the countries that were visible to him. **An alternative idea, if this one is too complicated, would be to have a drop list with all countries in it, and once a person clicks one, it will remain and a "+" sign will appear under it. When pressed, another dropdown menu will appear so the person can choose another country from the second drop down, etc. OFC all selected countries can have an X to remove them. Idk how to do this either.. I need help guys I have no clue how to do something like this, where do you recommend I start? Any ideas? I tried searching but I'm not sure what to call this so I couldn't find anything in the search. Thanks for your help so much!! hi, i am currently working on aptana stuidio Nokia WRT to create a mobile widget. the projects requires the retrieval of data from a database. I've created a java servlet in eclipse to connect and execute query to the database. In aptana, i'm using js file and html file. i am able to connect to the servlet, process the data (split it) and store in an array to display the retrieved data on screen. But now i am facing problems to put the retrieved data (array) into a drop down list for selection. can i do it in a js file? thanks =) I have my cumulative totals box at the very end of my order form and I'm required to have another underneath that one that will give a particular discount depending on how great the total of the order is. Would someone please be able to give me the javascript codes that will allow me to do this and also tell me where I'm to put them. I am working a form with radio button and calendar. What I would like to do is when the user selects Done - be able to display the calendar and if Not Done is selected, disable the calendar. Here is my code: <tr> <td class="tajuk_kecil"><div align="right">Status </div></td> <td class="tajuk_kecil"><div align="center">:</div></td> <td> <label><input name="status" type="radio" value="Done" checked>Done </label> <label><input name="status" type="radio" value="Not Done">Not Done</label> </td> </tr > <tr> <td class="tajuk_kecil"><div align="right">Date</div></td> <td class="tajuk_kecil"><div align="center">:</div></td> <td> <?php $myCalendar = new tc_calendar("date5", true, false); $myCalendar->setIcon("calendar/images/iconCalendar.gif"); $myCalendar->setDate(date('d'), date('m'), date('Y')); $myCalendar->setPath("calendar/"); $myCalendar->setYearInterval(2000, 2015); $myCalendar->dateAllow('2008-05-13', '2015-03-01'); $myCalendar->setDateFormat('j F Y'); $myCalendar->writeScript(); ?> </td> </tr> Any suggestions would be greatly appreciated. Thanx I've got no knowledge/experience of javascript, but i'm pretty competent with html and css. I've put together a site for my University radio statio, and i'd like to have a section that displays the show name thats broadcasting at the time. Can anyone point me towards a script, or tutorial, that might help me out? Thanks in advance! Code: I have to create two dropdownlists that are dependent
In my first select tag there are 4 selections ,,, year,quarter,month and week.
and in second select it should automatically populate..If user select year from first select in second select values should be 1 to 365.. if quarter values in second select(dropdown) should be 1 to 4. if month 1 to 12 and if week is selected 1 to 7.. can anyone help me to achieve this.. I will post that code and please help me to resolve this error as iam naive user to javascript..
<select id="user_defn_uom" name="user_defn_uom" onchange="alert(this.options[this.selectedIndex].text)" align="center">
<option selected value="">
<option value="Yearly">Yearly
<option value="Quarterly">Quarterly
<option value="Monthly">Monthly
<option value="Weekly">Weekly
</td>
<td>.
<select name="user_defn_day" align="center">
<option selected value="">
<script type="text/javascript">
alert(this.options[this.selectedIndex].text)
for (var i = 1; i <=366; i++)
{
document.write('<option value="' + i + '">' + i + '</option>');
}
</script>
</select>
Hi all I'm a real newbie to Java script, I've literally been teaching myself for about 2 days now, but I've come across a bit of a problem which I'm sure is easy to fix so I was hoping for some pointers. Heres the problem: What I'm trying to do is create a document which allows you to select a size of box from a drop down menu, and then select a size of product to go into the box on a second drop down. The products on the second drop down menu will be allocated based on the box size that you've selected to make sure that you can only choose products which will fit in the box you've selected. In order to do this I've set up a 2D array, which lists each product and which boxes they will fit in using 0 for no and 1 for yes. When you select a box size from the drop down a value appears in a text box next to it (1, 2, 3, or 4) and what I need to do is use the number which appears in this text box to pull data from the array to populate the next drop down list. i.e. If option 2 appears from the first drop down selection then the second drop down should be populated with data from column 2 of array (In this example 1212, 1515, and 2020 would be shown in the second drop down) Im having trouble with the Java script to pull the values from the html text box in order to manipulate the array. If you look at the function 'top_biochill_addOption_list()' you will see that the second drop is populated here from row [itop2][3] of the array, which means the second drop down is permenantly populated as if option 3 had been selected from the first drop down. I need to get the value selected from the first drop down as a variable and replace the '3' in the above statement with that variable to get this to work but I have no idea how to go about that. Hopefully all will become clear when you see the code. As I say, I am very new to Javascript so I'm sure this code is probably messy and inefficient, but with that in mind I'd appreciate replies being in simplified terms so I can understand what you're getting at, or if anything gets re-written then a brief explaination of whats going on would be handy so I can understand what the code is actually doing! Thanks Code:
<html>
<head>
<script type="text/javascript">
var linebreak = "<br />";
//Code to prints out the current product matrix
function print_top_biochill_list(){
var topx=0
var topy=0
for (topi=0;topi<top_biochill.length;topi++)
{
document.write(top_biochill[topx][topy]+" "+top_biochill[topx][topy+1]+" "+top_biochill[topx][topy+2]+" "+top_biochill[topx][topy+3]+" "+top_biochill[topx][topy+4]+"<br />");
var topx=topx+1;}}
//Code to create Drop Down Menu to select top Biochill
function top_biochill_addOption(selectbox,text,value ){
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);}
//Code to populate Top Biochill Drop Down Menu based on which size EPS is selected
function top_biochill_addOption_list(selectbox){
var itop2=0
for (var itop=0; itop < top_biochill.length;++itop){
if (top_biochill[itop2][3]==1){
top_biochill_addOption(document.top_biochill_drop_list.top_biochill_list, top_biochill[itop][0], top_biochill[itop][0]);
itop2=itop2+1
}}}
function addtop_biochill(){
}
</script>
</head>
<body onLoad="addtop_biochill();top_biochill_addOption_list()";>
<script type="text/javascript">
//Creates an array to describe top biochill
var top_biochill = new Array();
{
//0=Name, 1=EPS10, 2=EPS15, 3=EPS30, 4=EPS45
top_biochill[0] = new Array(1212,1,1,1,1 );
top_biochill[1] = new Array(1515,1,1,1,1 );
top_biochill[2] = new Array(2020,0,1,1,1 );
top_biochill[3] = new Array(3015,0,0,1,1 );
top_biochill[4] = new Array(3020,0,0,0,1 );
top_biochill[5] = new Array(3040,0,0,0,1 );
}
//Runs the prints the matrix code
print_top_biochill_list();
</script>
<!--Select EPS Size Drop Down Menu-->
<form name="box_size" onsubmit="CheckForm()">
<select name="box_size_jump_menu" onchange="document.box_size.EPSshowvalue.value=this.value">
<option value=0>Please select a Box Size</option>
<option value=1>EPS 10</option>
<option value=2>EPS 15</option>
<option value=3>EPS 30</option>
<option value=4>EPS 45</option>
</select>
<input type="number" name="EPSshowvalue">
<script type="text/javascript">
top_biochill_addOption_list();
</script>
</form>
<!--Select Top Biochill Drop Down Menu-->
<FORM name="top_biochill_drop_list" onsubmit="CheckForm()">
<SELECT NAME="top_biochill_list" onchange="document.top_biochill_drop_list.top_biochill_showvalue.value=this.value">
<Option value="" >Select Biochill</option>
</SELECT>
<input type="text" name="top_biochill_showvalue"><br>
</form>
</body>
</html>
Hi Experts, i have 2 JS array and i need to have dependency between them knowing that 1st Array has parent element of the 2nd one. i.e ARRAY1 ID VAL ID2 2 Dep1 10 3 Dep2 20 4 Dep3 30 ARRAY2 ID VAL ID2 PARENT 20 team1 11 10 21 team2 12 10 22 team3 13 20 23 team4 14 30 i need to have two different DDL's where when i choose VAL = Dep1 on ARRAY1 , i should see on the 2nd DDL only elements with parent corrsponding to Dep1 ( PARENT =10). how this can be possible thanks I have an ajax dependent drop down set up for location fields and am having trouble figuring out how to clear the dependent selects if the parent select is changed to blank. I set up a function to clearFields: Code: <script>
function clearFields() {
document.getElementById('cb_state').value = "";
}
</script>
And then set the parent to clearFields onchange: Code: onchange='ajaxFunction();clearFields();' This doesn't clear the field, but even if it did it would clear the field on change regardless of what's selected, what I need is for the function to fire only if the blank option is selected. How do I need to go about this? Here's part of the code, problem I have is I have it set up for 5 rows, I need it to be able to make more than this, but not sure how many more, this is dependent on user input, how should I go about this? Also how would I go about making the users orders correspond with the right item number? I'd need to sort the array somehow? document.write('<table border="1">'); document.write("<tr>"); document.write('<th colspan="5">ORDER</th>') document.write("</tr>"); document.write("<tr>"); document.write('<th align="left">Item #</th>'); document.write('<th align="center">Name</th>'); document.write('<th align="center">Price</th>'); document.write('<th align="center">Quantity</th>'); document.write('<th align="center">Total</th>'); document.write("</tr>"); document.write('<td align="center">0</td>'); document.write('<td>' + productName[0] + '</td>'); document.write('<td> $' + sausagePrice + '</td>'); document.write('<td> ' + orderItemQty[0] + '</td>'); document.write('<td> ' + sausageTotal + '</td |
|||||||