JavaScript - Drop-down - Show Options Dependent On Options In Another Drop-down

udayanga0727@yahoo.comI need to a code to do the following.

There is a Text Area that user can enter text. assume that user enter something and put a dot Following values should be populate in a drop down at the place where dot locate .

-Hello
-Hi
_Test


like when we get the string object using Net Beans IDE and when we put "Object." , drop down will be displayed with available methods for that particular object. idea is to build a editor using java script.


can any one help me on this?

Hi 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

Hi

I am trying to use Overlib code to develop a dropdown box area that I can populate with categories and buttons, however the Overlib seem to lie relevent to the mouse and not the button.

Does anyone know any good examples maybe jquery, to create this type of large dropdown.

I want to be able to populate the area with images, and categories using php.

I hope this make some sense.

Steve

Hi Everyone! I would genuinely appreciate some help on this one.

I'm trying to combine a chained drop down list with the ability for the last selection to show/hide a div. I've researched and found ways to do both individually, but I'm hitting the wall when it comes to combining the javascript.

This is how I'd like it to work:
-- User selects from DropDown List 1.
-- DropDown List 2 options appear based on the selection in 1.
-- User selects from DropDown List 2,
-- Appropriate div is shown.

Here's the Javascript I'm using to show/hide a div:

Code:

function showDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = ""; //display div
}

function hideDiv(divID)
{
var div = document.getElementById(divID);
div.style.display = "none"; // hide
}

function hideAllDivs()
{
//Loop through the seclect menu values and hide all
var courseSelect = document.getElementById("courseSelect");
for (var i=0; i<=courseSelect.options.length -1; i++)
{
hideDiv(courseSelect.options[i].value);
}
}

function toggle(showID){
hideAllDivs(); // Hide all
showDiv(showID); // Show the one we asked for
}

Here's the Javascript for the chained drop down lists:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript" defer>
function cascadeSelect(parent, child){
var childOptions = child.find('option:not(.static)');
child.data('options',childOptions);

parent.change(function(){
childOptions.remove();
child
.append(child.data('options').filter('.sub_' + this.value))
.change();
})

childOptions.not('.static, .sub_' + parent.val()).remove();

}

$(function(){
cascadeForm = $('.cascadeTest');
deptartmentSelect = cascadeForm.find('.deptartmentSelect');
courseSelect = cascadeForm.find('.courseSelect');

cascadeSelect(deptartmentSelect, courseSelect);
});

And lastly, my HTML (simplified)

Code:

<form action="#" class="cascadeTest">
<table>
<tr>
<th>Organization:</th>
    <td><select name="deptartmentSelect" class="deptartmentSelect">
        <option value="0">Select a Department</option>
        <option value="1">Dept A</option>
        <option value="2">Dept B</option>
        <option value="3">Dept C</option>
      </select></td>
  </tr>
  <tr>
    <th>Territory:</th>
    <td><select name="courseSelect" class="courseSelect" onChange="toggle(this.options[this.options.selectedIndex].value)">
        <option value="0" class="static">- Courses -</option>
        <option value="A1" class="sub_1">Course A1</option>
        <option value="B1" class="sub_2">Course B1</option>
        <option value="C1" class="sub_3">Course C1</option>
      </select></td>
  </tr>
</table>
</form>
<div id="A1" style="display:none;">I am Course A1</div>
<div id="B1" style="display:none;">I am Course B1</div>
<div id="C1" style="display:none;">I am Course C1</div>

Thanks again in advance!

I am using the following code to show / hide form elements within a div based upon the drop down choice.

Does anyone know how this code can be amended to use multiple drop downs within one form?

Code:

<html>
<head>
<title>Show and Hide</title>

<script>
//*********************************************
// Function that Shows an HTML element
//*********************************************
function showDiv(divID)
{
	var div = document.getElementById(divID);
	div.style.display = ""; //display div
}

//*********************************************
// Function that Hides an HTML element
//*********************************************
function hideDiv(divID)
{
	var div = document.getElementById(divID);
	div.style.display = "none"; // hide
}
//*****************************************************************************
// Function that Hides all the Div elements in the select menu Value
//*****************************************************************************
function hideAllDivs()
{
	//Loop through the seclect menu values and hide all
	var selectMenu = document.getElementById("selectMenu");
	for (var i=0; i<=selectMenu.options.length -1; i++)
	{
		hideDiv(selectMenu.options[i].value);
	}
}
//*********************************************
// Main function that calls others to toggle divs
//*********************************************
function toggle(showID)
{
	hideAllDivs(); // Hide all
	showDiv(showID); // Show the one we asked for

}


</script>
</head>
<body onload="hideAllDivs();">

<select id="selectMenu" onchange="toggle(this.options[this.options.selectedIndex].value)">
<option value="formNumber1"> Show Form 1 </option>
<option value="formNumber2"> Show Form 2 </option>
<option value="formNumber3"> Show Form 3 </option>
<option value="formNumber4"> Show Form 4 </option>

</select>

<div id="formNumber1"> I am Form Number one. Any content within this div will be showed</div>

<div id="formNumber2"> I am Form Number two. Any content within this div will be showed</div>

<div id="formNumber3"> I am Form Number three. Any content within this div will be showed</div>

<div id="formNumber4"> I am Form Number four. Any content within this div will be showed</div>


</body>
</html>

Thanks in advance!

I have the following code below to make and populate a select box for a row. It is working on my IE, Firefox, and Chrome, but some others are having problems. It makes the select box, but it does not put the options in there. I am having issues troubleshooting because I cannot replicate the error.
Any ideas?
Code:

newManufacturerCell = newRow.appendChild(document.createElement('td'));
var newSelect=newManufacturerCell.appendChild(document.createElement('select'));
var firstOption=document.createElement('option');
var secondOption=document.createElement('option');
firstOption.text="Dell DCS";
secondOption.text="Hp";
newSelect.add(firstOption,null);
newSelect.add(secondOption,null);
newSelect.id="man"+count;

I currently have two selectbox, the first for categories and the second for subcategories. When an option from the category selectbox is chosen I would like the subcategory selectbox to be filled with options drawn from an array.

The following code I have works for Chrome and Firefox but not in IE, I would appreciate any help to fix the code or new code which does a similar function.

HTML:
Code:

<select size="9" id="category" name="category" onclick="return categoryChange();">
                    	<option>Antiques ></option>
                        <option>Art and Crafts ></option>
                    </select>

                    <select style="visibility:hidden" id="subcategory" name="subcategory" size="9">
                    </select>

JAVASCRIPT:

Code:

function addOption(selectbox,text,value){
			var optn = document.createElement("OPTION");
			optn.text = text;
			optn.value = value;
			selectbox.options.add(optn);
		}
		
		var antiques = new Array("Furniture","Ceramics","Glass");
		var art = new Array("Drawings and Paintings","Photographs");
		
		
		function categoryChange(){
			
			document.getElementById("subcategory").style.visibility = "visible";
			document.getElementById("subcategory").innerHTML = "";
			
			
			if(document.getElementById("category").value == "Antiques >"){
				for (var i=0; i < antiques.length;++i){
					addOption(document.myForm.subcategory, antiques[i], antiques[i]);
				}		
			}
			else if(document.getElementById("category").value == "Art and Crafts >"){
				for (var i=0; i < art.length;++i){
					addOption(document.myForm.subcategory, art[i], art[i]);
				}
			}
                }

Hello everyone,

Forgive me if I ask something stupid or don't word something just right.
Basically in short I'm really struggling because I don't know javascript beyond the simplest of basic's "manipulating other code"....

What I'm after or trying to do is simply create a script to launch a new page after a X amount of time, like a popup. But I need the new window to have the following options like no toolbar or scroll bars etc... This is the code I've been trying to manipulate for my purpose and just can't get it right meaning it doesn't work at all in fact I haven't even been able to get the timer part worked in since I couldn't get the launch part working..... I've made a web app using asp.net & vb.net and need a launch page so I don't have any toolbars or scrollbars etc....

Any help or input is much appreciated!! Thanks

Code:

<html>
  <script>
    var customerWindow;
    function launchit() {
      var var_height = screen.availHeight - 10;
      var var_width = screen.availWidth - 10;
      var customerUrl = "default.aspx";
      if ( !customerWindow || customerWindow.closed ) {
        options = 'top=0,' + 
                  'left=0,' +
                  'height=' + var_height + ',' +
                  'width=' + var_width + ',' +
                  'fullscreen=no,' +
                  'directories=no,' +
                  'location=no,' +
                  'menubar=no,' +
                  'resizable=yes,' +
                  'scrollbars=yes,' +
                  'status=yes,' +
                  'titlebar=yes,' +
                  'toolbar=no';
        var wname = new String(location.pathname);
        var re1 = /\//g;
        var re2 = /\\/g;
        var re3 = /\./g;
        wname = wname.replace( re1, "" );
        wname = wname.replace( re2, "" );
        wname = wname.replace( re3, "" );
        customerWindow = window.open(customerUrl, wname, options);
        if (customerWindow == null) {
          alert("Could not open a new window. Are popups being blocked?");
        }
        else {
          customerWindow.opener = null;
        }
      }
      else {
        customerWindow.focus();
      }
    }
  </script>
  <head>
    <title>Test Lanuch</title>
  </head>
  <body id="launcher" onload="launchit();">

    <div class="submit">
      <input class="button" type="button" value="Launch" onClick="javascript:launchit();" />
    </div>
  </body>
</html>

Please i am new here and i need some urgent help. I am not much familiar with JavaScript. i have 3 options list as <ul> now what i want is when first scrollbar is chosen the second and third will be enable and will display dates and time..and when somebody choose a date he will be taken to a registration form. for example in my second option i will display dates this will be only enable when the city is being selected from first list:

Code:

<select>
<option>Please Select</option>
<option> 12/12/2009</option>
<option > 12/12/2010</option>
<option> 12/12/2011</option>
<option> 12/12/2012</option>
</select>

here is the code for my option list:

Code:

<ul>
<li>I am in City<select name="dates">
    <option value=0 >Please Select</option>
<optgroup label='test'>
<option value=3 style='font-family:Arial; color:#ffffff;'> City One</option>
<option value=4 style='font-family:Arial; color:#ffffff;'> City Two</option>
<option value=5 style='font-family:Arial; color:#ffffff;'> City Three</option>
<option value=6 style='font-family:Arial; color:#ffffff;'> City Four</option></select></optgroup>
</li>
<li>Dates Available<select name="dates">
    <option value=0>Please Select</option></select>
</li>
<li>Times Available<select name="dates">
    <option value=0>Please Select</option></select>
</li>
</ul>

Thanks for any help

Hi there,

I am looking for a javascript code for an html file. I am looking for something where when you put your mouse over the text, a drop down list will come down. If anyone can point me in the right direction that would be helpful.

An example would be on a site like www.espn.com - when you put your mouse over NBA the following options appear: NBA Home, Scores, Schedule, Teams, etc.

I'm trying to make a jQuery slider, and I want the user (the person who installs it on their site) to be able to specify options easily. I know the Nivo slider does it from within the $(document).ready() event, but I can't figure out how to do it that way. I want it to be like this:

Code:

<script>
$(document).ready(function() {
myFunction({
option1: 'value1',
option2: 'value2',
etc: 'etc'
});
});
</script>

But how do I recover this data so I can use it later?

Okay so I'm trying to come up with as many alternative methods to accomplish something. So I'm just seeking input from anyone who is willing to supply some.

After the user clicks on a match type it'll know HOW MANY sides to the match there are so say for a singles match it'd have 2 sides (1 vs. 1) for a Triple Threat Match it'd have 3 sides (1 vs. 1 vs. 1) and so on. All matches have a stored field in the database of how many sides they have.

So I'm thinking that I could have it create 3 divs (or something) down in the competitors area of how many sides there are in the match (separated by a VS. text block) and when the user selects a character from the dropdown and adds a character the user can maybe drag and drop the character's name to whatever side they choose.

Its one idea. If you think of an EASIER more EFFICIENT way to do something like this and have an idea say something please or even if you can't let me know that you think it's a worth while idea.

Code:

<label for="matchtypedrop<?php echo $i+1 ?>">Match Type:</label>
            <select class="dropdown" name="matchtypedrop<?php echo $i+1 ?>" id="matchtypedrop<?php echo $i+1 ?>" title="Match Type <?php echo $i+1 ?>">
                <option value="0">- Select -</option>
               <?php
                $query = 'SELECT id, matchtype FROM matchtypes';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['id']."\">".$row['matchtype']."</option>\r";
                }
                ?>
            </select>

<label for="competitors<?php echo $i+1 ?>">Competitors:</label><ul id="competitors<?php echo $i+1 ?>" style="list-style: none; margin-left: 195px;"></ul>
            <select class="dropdown" name="charactersdrop<?php echo $i+1 ?>" id="charactersdrop<?php echo $i+1 ?>" title="Characters Dropdown <?php echo $i+1 ?>" style="margin-left: 195px;">
                <option value="0">- Select -</option>
               <?php
                $query = 'SELECT id, `character` FROM characters ORDER BY `character`';
                $result = mysqli_query ( $dbc, $query ); // Run The Query
                while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) { 
                    print "<option value=\"".$row['id']."\">".$row['character']."</option>\r";
                }
                ?>
            </select>
            <input type="button" value="Add Character" class="" onclick="Competitors(<?php echo $i+1 ?>)"/>

If i have an existing HTML Select statement with options specified, and then based on an even, i want to rebuild that options list, how do I wipe the existing options parameters in order to add new ones? Is that even possible?

Hello!

I'm trying to figure out a way of having + and - buttons which cycle through the options in a select box such as:

<select name="distance" id="jr_radius">
<option value="0.5">0.5 Miles</option>
<option value="1">1 Mile</option>
<option value="3" selected="selected">3 Miles</option>
<option value="5">5 Miles</option>
<option value="10">10 Miles</option>
</select>

So far I've only been able to have a button change the select box to a specific value, or add or subtract to a numerical value. Both of which aren't quite right.

Ideally if the default value is "3" then clicking the + button could make it "5" and clicking the same button again would make it "10". Visa versa, the minus button would make the value "1" and then if pressed again it would become "0.5".

Does that make sense? Any help will be greatly appreciated!

Hi all,
I have table in Javascript and it has addrow, deleterow, submit, and functions.
when i click it automatically adds new row and it has select option to choose some of them
for ex. in added two rows and one of drop down combox i chose Motherboard Asus and from other i chose Motherboard Gigabyte.

So i need once i select the name from combobox, should not allow user to select same name in coming rows

Here is my code.

Thanks beforehands


PHP Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head><title>dinamik sheet</title> 
<script>  
var i=iteration; 
function addrow(){ 
    var tbl = document.getElementById('sheet'); 
    var iteration = tbl.rows.length; 
document.getElementById('count_rows').value = iteration; 
    var row=tbl.insertRow(iteration); 
  
    var cellLeft = row.insertCell(0); 
    var textNode = document.createTextNode(iteration); 
    cellLeft.appendChild(textNode); 
  
    var cellRight = row.insertCell(1); 
    var el = document.createElement('input'); 
    el.type = 'text'; 
    el.name = 'txtRow'+iteration; 
    el.id = 'txtRow'+iteration; 
    el.size = 15; 
    el.value = '0'; 
    el.onblur = sum; 
    cellRight.appendChild(el); 
  
    var cellRight = row.insertCell(2); 
    var elaz = document.createElement('input'); 
    elaz.type = 'text'; 
    elaz.name = 'txtRowaz'+iteration; 
    elaz.id = 'txtRowaz'+iteration; 
    elaz.size = 20; 
    elaz.value = '0'; 
    elaz.onblur = sum; 
    cellRight.appendChild(elaz); 
  
  
  
    var cellRight1 = row.insertCell(3); 
    var ela = document.createElement('input'); 
    ela.type = 'text'; 
    ela.name = 'txtRowe'+iteration; 
    ela.id = 'txtRowe'+iteration; 
    ela.size = 20; 
    ela.value = '0'; 
    ela.onblur = sum; 
    cellRight1.appendChild(ela); 
  
    var cellRightsel = row.insertCell(4); 
    var sel = document.createElement('select'); 
    sel.name = 'selRow' + iteration; 
    sel.id = 'selRow' + iteration; 
    sel.onchange = sum; 
    sel.options[0] = new Option('MotherBoard ASUS', 'MotherBoard ASUS'); 
    sel.options[1] = new Option('MotherBoard Gigabyte', 'MotherBoard Gigabyte'); 
    sel.options[2] = new Option('MotherBoard MSI', 'MotherBoard MSI'); 
    sel.options[3] = new Option('Graphiqcard ASUS', 'Graphiqcard ASUS'); 
    sel.options[4] = new Option('GraphigCard ATI', 'GraphigCard ATI'); 
    sel.options[5] = new Option('GraphigCard GefORCE', 'GraphigCard GefORCE'); 
    cellRightsel.appendChild(sel); 
    sum(); 
} 
function removeRowFromTable() 
{ 
  var tbl = document.getElementById('sheet'); 
  var lastRow = tbl.rows.length; 
  if (lastRow > 2) tbl.deleteRow(lastRow - 1); 
} 
  
function sum(){ 
    var s1 = 0; 
    var s2 = 0; 
    var tbl=document.getElementById('sheet'); 
    var iteration=tbl.rows.length-1; 
    for(var i=1; i<=iteration; i++){//loop through table rows 
        var el1 = document.getElementById('txtRow'+i);//Row's Income field 
        var el2 = document.getElementById('selRow'+i);//Row's percentage menu 
        var ela = document.getElementById('txtRowe'+i);//Row's Tax cell 
        var elaz=document.getElementById('txtRowaz'+i); 
  
        if(!el1 || !el2 || !ela||!elaz) continue; 
        var txt = el1.value; 
        if(txt != ( '' + Number(txt) )) continue;  //reject non-numeric entries 
  
var tax = Number(txt) * Number(130); 
  
if(el2[el2.selectedIndex].value=="MotherBoard Gigabyte"){ 
    var  tax = Number(txt) * Number(150); 
  
  
} 
if(el2[el2.selectedIndex].value=="MotherBoard MSI"){ 
    var  tax = Number(txt) * Number(100);     
  
} 
if(el2[el2.selectedIndex].value=="Graphiqcard ASUS"){ 
    var  tax = Number(txt) * Number(85);     
  
} 
if(el2[el2.selectedIndex].value=="GraphigCard ATI"){ 
    var  tax = Number(txt) * Number(95);     
  
} 
if (el2[el2.selectedIndex].value=="GraphigCard ATI") 
{ 
  
        var tax = Number(txt) * Number(88); 
} 
  
        ela.value = tax.toFixed(2); 
        elaz.value=tax.toFixed(2)/Number(txt); 
        if(isNaN(elaz.value)){ 
        elaz.value=0; 
        } 
        s1 += Number(txt); 
        s2 += tax; 
  
} 
    var t1 = document.getElementById('total'); 
    var t2 = document.getElementById('taxtotal'); 
    if(t1){ t1.value = s1.toFixed(2); } 
    if(t2){ t2.value = s2.toFixed(2); } 
} 
  
onload = function(){ 
    addrow(); 
} 
</script> 
</head> 
<body> 
<form name="eval_edit" method="POST" action="part1.php?id=iteration-1"> 
<table align="center" width="75%"> 
<tr> 
<td align="center">Balance sheet</td></tr> 
<tr> 
<td align="center"> 
    <table id="sheet" border="1"> 
    <tr><td>object</td><td>Total amount</td><td>One ITEM Price</td><td name="amount">Total Item Price </td><td>Name</td></tr> 
  
    </table> 
</td> 
</tr> 
<tr> 
<td align="center"> 
<input type="hidden" name="count_rows" id="count_rows" /> 
<input type="button" value="Add" onclick="addrow()" /> 
<input type="button" value="Remove" onclick="removeRowFromTable()" /> 
<input type="button" value="SUM" onClick="sum()"/> 
<input type="submit" value="Submit" /><br /> 
</td> 
</tr> 
<tr> 
<td align="left"> 
<input id="total" name="total" type="text"/>total amount of products<br /> 
<input id="taxtotal" name="taxtotal" type="text"/>total price of products 
</td> 
</tr> 
</table> 
</form> 
  
</body> 
</html>