|
JavaScript - Double Drop Down Listbox
Similar Tutorialshello I have a listbox full of names on a PHP website and was wondering if there was a way to grab the value during a double click to bring me to another form to display the name and information? I currently have a Drop-Down menu, which has headers you click on to show the links. This menu only allows one drop to be expanded at a time, and can be viewed here. I would like the headers to be able to have 'sub-headers' inside, which also drop-down,to reveal the links. I want them to have a different header colour, and to have the same rule where only one can be open at a time. while keeping the rule with the main headers. I have previously posted asking this, and got no reply, so I would really greatly appreciate any help and/support! Best Regards, Tim (P.S. I am still only learning JavaScript, and to make the current menu I have, took loads of help for a different project) I am presently using a script provided by http://javascript.internet.com/forms...drop-down.html. This script works great, however I need three sequential drop down menus rather than the two provided in this script. I need Country > Province/State > Cities. Unfortunately I am not a programmer, but generally muddle along to a resolution. In this case I am stumped. Can anyone show me what needs to be added to that existing script to convert it into a three menu script instead of two? I've searched extensively but find nothing about this. I apologize in advance for my lack of scripting knowledge, but much of JavaScript leaves me thoroughly confused. With html I am fine, but at 69 years of age the 'newer' scripts are leaving me behind.
I thought I was so cool combining both this shopping cart with the double drop down menu, but now my menu isnt working and I can't seem to trouble shoot my way through it anymore. I am sure I am missing just one small part because the page loads fine, but when I select an option from step three where it says "select a subject" it no longer loads the options into the subsequent drop down menu which reads "Pages appear here" (LoL at least I WISH they would appear there) Here is the code. I apologize for not making it smaller, but as I mentioned it is meshed with a shopping cart and I am not skilled enough to seperate my code. Code:
<head>
<script language="javascript">
<!--//
//new Option("text","value")
//this code changes menus
function nullOptionsDMA(aMenu){
var tot=aMenu.options.length
for (i=0;i<tot;i++)
{
aMenu.options[i]=null
}
aMenu.options.length=0;
}
function MySubjectDMA0(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Drink Low/No Alcohol Beer","295");
options[2]=new Option("Drink Mixed Drinks","295");
options[3]=new Option("Buy Chewing Tobacco","295");
options[0].selected=true
}
}
function MySubjectDMA1(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Buy Fine Jewelry,<$400","295");
options[2]=new Option("Buy Aerobic/Fitness Shoes, $50+","295");
options[3]=new Option("Dry Cleaning,$100+","295");
options[0].selected=true
}
}
function MySubjectDMA2(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Lease Most Recent Vehicle","295");
options[2]=new Option("Own/Lease New Vehicle","295");
options[3]=new Option("Own/Lease Used Vehicle","295");
options[0].selected=true
}
}
function MySubjectDMA3(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Has Satellite Dish","295");
options[2]=new Option("Watch Any Pay-per-View","100");
options[0].selected=true
}
}
function MySubjectDMA4(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Own Camcorder","295");
options[2]=new Option("Buy Any TV","295");
options[3]=new Option("Own 3+ Television Sets","295");
options[0].selected=true
}
}
function MySubjectDMA5(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Has Any Homeowner/Per Pr Insurance","295");
options[2]=new Option("Has Auto","295");
options[3]=new Option("Has Disability Insurance","295");
options[0].selected=true
}
}
function MySubjectDMA6(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Grocery Shop,4+ Times 1wk","295");
options[2]=new Option("Grocery Store, Travel 11+ Miles ","295");
options[0].selected=true
}
}
function MySubjectDMA7(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Buy Health/Beauty Products for Women,$100+","295");
options[2]=new Option("Go to the Doctor for Check-Ups","295");
options[3]=new Option("Use Hair Growth Products","295");
options[0].selected=true
}
}
function MySubjectDMA8(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Buy from Fast Food","295");
options[2]=new Option("Dine Out,1+ Times/wk","295");
options[3]=new Option("Dine Out,<1 Times/mo","295");
options[0].selected=true
}
}
function MySubjectDMA9(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Belong to a Church Board ","295");
options[2]=new Option("Belong to a Country Club ","100");
options[3]=new Option("Buy Any Children's Toys","295");
options[0].selected=true
}
}
function MySubjectDMA10(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","295");
options[1]=new Option("Average Monthly Cell Phone Bill,$100+","295");
options[2]=new Option("Own Cell Phone ","295");
options[3]=new Option("Has Cell Phone for Business Use ","295");
options[0].selected=true
}
}
function MySubjectDMA11(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","0");
options[1]=new Option("Ads Keep Me Up-to-Date about Prods/Svcs I Want","295");
options[2]=new Option("Buy Based on Quality, Not Price","295");
options[3]=new Option("Choose Store b/c Store Personnel Service","295");
options[0].selected=true
}
}
function MySubjectDMA12(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","1650");
options[1]=new Option("Has Cooling Equipment, Heat Pump","1650");
options[2]=new Option("Has Heater System, Central Warm","1650");
options[3]=new Option("Has Heater System, Heat Pump ","1650");
options[0].selected=true
}
}
function MySubjectDMA13(aMenu){
nullOptionsDMA(aMenu)
with (aMenu){
//Rewrites the text and values
options[0]=new Option("Select a page","1650");
options[1]=new Option("Has Online Game Download Sub","1650");
options[2]=new Option("Has Online Movie Download Sub","1650");
options[3]=new Option("Has Online","1650");
options[0].selected=true
}
}
/* ####################### setUp100 ####################### */
function setUpDMA(){
with (document.orderform) {
if (menuSubjectsDMA.selectedIndex==0){
menuSubjectsDMA.options[0].selected=true
qty4.options[0].selected=true
}
if (menuSubjectsDMA.selectedIndex==1)
MySubjectDMA0(qty4)
if (menuSubjectsDMA.selectedIndex==2)
MySubjectDMA1(qty4)
if (menuSubjectsDMA.selectedIndex==3)
MySubjectDMA2(qty4)
if (menuSubjectsDMA.selectedIndex==4)
MySubjectDMA3(qty4)
if (menuSubjectsDMA.selectedIndex==5)
MySubjectDMA4(qty4)
if (menuSubjectsDMA.selectedIndex==6)
MySubjectDMA5(qty4)
if (menuSubjectsDMA.selectedIndex==7)
MySubjectDMA6(qty4)
if (menuSubjectsDMA.selectedIndex==8)
MySubjectDMA7(qty4)
if (menuSubjectsDMA.selectedIndex==9)
MySubjectDMA8(qty4)
if (menuSubjectsDMA.selectedIndex==10)
MySubjectDMA9(qty4)
if (menuSubjectsDMA.selectedIndex==11)
MySubjectDMA10(qty4)
if (menuSubjectsDMA.selectedIndex==12)
MySubjectDMA11(qty4)
if (menuSubjectsDMA.selectedIndex==13)
MySubjectDMA12(qty4)
if (menuSubjectsDMA.selectedIndex==14)
MySubjectDMA13(qty4)
}
}
/* ####################### changeFiles ####################### */
function changeFilesDMA(){
aMenu=document.orderform.menuSubjectsDMA
aMenu2=document.orderform.qty4
with (aMenu){
switch (selectedIndex) {
case 0:
aMenu2.options.length=0;
aMenu2.options[0]=
new Option("Pages appear here","0")
aMenu2.options[0].selected=true;
history.go(0)
break
case 1:
MySubjectDMA0(aMenu2)
aMenu2.options[0].text="Drink Any Beer"
break
case 2:
MySubjectDMA1(aMenu2)
aMenu2.options[0].text="Buy Costume Jewelry"
break
case 3:
MySubjectDMA2(aMenu2)
aMenu2.options[0].text="Bought Most Recent Vehicle"
break
case 4:
MySubjectDMA3(aMenu2)
aMenu2.options[0].text="Subscribe to Cable TV"
break
case 5:
MySubjectDMA4(aMenu2)
aMenu2.options[0].text="Buy Camera"
break
case 6:
MySubjectDMA5(aMenu2)
aMenu2.options[0].text="Has Any Credit Card"
break
case 7:
MySubjectDMA6(aMenu2)
aMenu2.options[0].text="Grocery Shopping spend $150+ 1wk"
break
case 8:
MySubjectDMA7(aMenu2)
aMenu2.options[0].text="Buy Health/Beauty Products for Men,$100+"
break
case 9:
MySubjectDMA8(aMenu2)
aMenu2.options[0].text="Buy from Any Fast Food Restaurant"
break
case 10:
MySubjectDMA9(aMenu2)
aMenu2.options[0].text="Attend Classical/Opera perform.,1+ Times/mo"
break
case 11:
MySubjectDMA10(aMenu2)
aMenu2.options[0].text="Average Monthly Cell Phone Bill,<$26"
break
case 12:
MySubjectDMA11(aMenu2)
aMenu2.options[0].text="Ads Are More Manipulative Than Informative100"
break
case 13:
MySubjectDMA12(aMenu2)
aMenu2.options[0].text="Has Cooling Equipment, Central Air"
break
case 14:
MySubjectDMA13(aMenu2)
aMenu2.options[0].text="Has Wireless home network"
break
}
}
}
//-->
</script>
<!-- ######## end copying code (DMA) from the HEAD ####### -->
<script>
<!--
function wopen(url, name, w, h)
{
// Fudge factors for window decoration space.
// In my tests these work well on all platforms & browsers.
w += 32;
h += 96;
var win = window.open(url,
name,
'width=' + w + ', height=' + h + ', ' +
'location=no, menubar=no, ' +
'status=no, toolbar=no, scrollbars=no, resizable=no');
win.resizeTo(w, h);
win.focus();
}
// -->
</script>
<SCRIPT SRC="language-en.js"></SCRIPT>
<SCRIPT SRC="nopcart.js">
</SCRIPT>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<BODY>
<table class="Global" cellpadding="0" cellspacing="0" border="0">
<tr><td height="117" colspan="2">
<!-- ============ Navbar Menu ============== -->
<table class="NavBar" style="height: 27px;" cellspacing="0" border="0"><tr><td>
<table class="NavBarMenu" style="height: 27px;" align="left" border="0" cellspacing="0"><tr>
<td><a href="index.html">Home</a> </td>
<td><a href="samples.html">Samples</a> </td>
<td><a href="ordering.html">Ordering</a> </td>
<td><a href="faq.html">F.A.Q.</a> </td>
<td><a href="contact.html">Contact</a></td>
</tr></table>
</td></tr></table>
<div style="height: 1px; background: #000000;"><img src="images/space1x1.gif" width="1" height="1" alt="spacer"></div>
<noscript>
<p style="color:red">You appear to have Javascript disabled. This page requires Javascript. Please <a
href="http://support.microsoft.com/gp/howtoscript" target="_blank">enable Javascript</a> and reload this page before
continuing.</p>
</noscript>
<script language="JavaScript">
<!--
function CalculateTotals(){
f=document.orderform;
f.total1.value=parseInt(f.qty1.value)*50;
f.total2.value=parseInt(f.qty2.value)*((f.qty1.value)*10+10);
f.total3.value=parseInt(f.qty3.value)*100;
f.total4.value=parseInt(f.qty4.value)*1.2;
f.grandtotal.value=parseInt(f.total1.value)
+parseInt(f.total2.value)
+parseInt(f.total3.value)
+parseInt(f.total4.value)
+parseInt(f.sh.value);}
//-->
</script></head>
<body>
<form name="orderform" method="post" action="formprocessor">
<table border="1" width="100%" cellpadding="4"><tr>
<td colspan="2" align="center"><b>Step 1: Select what to include in your report</b><br><i>My report should...</i></td></tr>
<tr><td>
Evaluate a radius of <select name="qty1" onchange="CalculateTotals()">
<option Selected value="0">5 miles
<option value="1">10 miles
<option value="2">15 miles
<option value="3">20 miles
</select>
around <INPUT TYPE="text" NAME="Location" VALUE="Full Address OR Zipcode" SIZE="22" MAXLENGTH="45">
</td>
<td align="right"><input name="total1" size="7"
OnFocus="document.orderform.qty2.select();
document.orderform.qty2.focus();" /></td></tr>
<tr><td>
<select name="qty2" onchange="CalculateTotals()">
<option Selected value="0">No
<option value="1">Yes
</select>
Include competitive analysis (<a href="whatis1.html" target="popup"
onClick="wopen('whatis1.html', 'popup', 350, 450); return false;">what is this?</a>)
</td>
<td align="right"><input name="total2" size="7"
OnFocus="document.orderform.qty3.select();
document.orderform.qty3.focus();" /></td></tr>
<tr><td>
<select name="qty3" onchange="CalculateTotals()">
<option Selected value="0">No
<option value="1">Yes
</select>
Include target market report (<a href="whatis2.html" target="popup"
onClick="wopen('whatis2.html', 'popup', 350, 450); return false;">what is this?</a>)
</td>
<td align="right"><input name="total3" size="7"
OnFocus="document.orderform.qty4.select();
document.orderform.qty4.focus();" /></td></tr>
</table><br><table border="1" width="100%" cellpadding="4">
<tr><td colspan="4" align="center">
<b>Step 2: Define your target market</b><br><i>The people I am looking for are...</i></td></tr>
<tr><td colspan="2">
Household Age</td><td colspan="2">
<select name="HHAge" onchange="CalculateTotals()">
<option Selected value="">Target Age
<option value="Less than 35">Less than 35
<option value="Less than 100">Less than 55
<option value="25to44">25-44
</select>
<tr><td colspan="2">
Average Household Education</td><td colspan="2">
<select name="HHEducation" onchange="CalculateTotals()">
<option Selected value="">Target Education
<option value="GradPlus">Graduate Plus
<option value="CollegeGrad">College Grad
</select><br>
<tr><td colspan="2">
Household Employment Type</td><td colspan="2">
<select name="HHEmployment" onchange="CalculateTotals()">
<option Selected value="">Target Employment
<option value="Management">Management
<option value="Professional">Professional
</select><br>
<tr><td colspan="2">
Household Ethnicity</td><td colspan="2">
<select name="HHEthnicity" onchange="CalculateTotals()">
<option Selected value="">Target Ethnicity
<option value="White">White
<option value="WhiteAsianMix">White, Asian, Mix
</select><br>
<tr><td colspan="2">
Household Composition</td><td colspan="2">
<select name="HHComposition" onchange="CalculateTotals()">
<option Selected value="">Target Age
<option value="HHwithKids">Household with kids
<option value="MostlywithKids">Mostly with kids
</select><br>
<tr><td colspan="2">
Household Income</td><td colspan="2">
<select name="HHIncome" onchange="CalculateTotals()">
<option Selected value="">Target Income
<option value="Wealthy">Wealthy
<option value="Upscale">Upscale
<option value="UpperMiddle">Upper Middle
<option value="Middle">Middle
<option value="LowerMid">Lower Middle
</select><br>
<tr><td colspan="2">
Household Tenure</td><td colspan="2">
<select name="HHTenure" onchange="CalculateTotals()">
<option Selected value="">Target Tenure
<option value="Homeowners">Homeowners
<option value="Renters">Renters
</select><br>
</td></tr>
</table><br><table border="1" width="100%" cellpadding="4">
<tr><td colspan="4" align="center"><b>Step 3: Add a specialty targeting criteria</b><br><i>I want people
who...</i></td></tr><tr></td>
<tr><td>
<!-- This menu holds the subjects-->
<select name="menuSubjectsDMA" onChange="changeFilesDMA()" size="1">
<option value="0">Select a subject
<option value="">Alcohol & Tabacco $295
<option value="">Jewelry & Apparel $295
<option value="">Automotive $295
<option value="">TV Media $295
<option value="">Electronics & Internet $295
<option value="">Finance $295
<option value="">Grocery $295
<option value="">Health & Drugs $295
<option value="">Restaurants $295
<option value="">Sports & Leisure $295
<option value="">Telecommunications $295
<option value="">Consumer Behavior $295
<option value="">Home and Utilities $1980
<option value="">Home Technology $1980
</select>
</td><td colspan="2">
<!-- this menu holds the files to go-->
<select name="qty4" onChange="CalculateTotals()" style="width:200" size="1">
<option value="0">Pages appear here
</select>
<td align="right"><input name="total4" size="7"
OnFocus="document.orderform.qty1.select();
document.orderform.qty1.focus();" /></td></tr>
</td></tr>
</table><br>
<table border="1" width="100%" cellpadding="4">
<tr><td colspan="4" align="center"><b>Step 4: Tell us about your business</b><br><i>Customize my report for...</i></td></tr>
<tr><td>
<td align="right">Minimum Order:</td><td align="right">$200 </td></tr>
<tr><td></td><td></td>
<td align="right"><b>GRAND TOTAL:</b></td>
<td align="right"><input name="grandtotal" size="7"
OnFocus="document.orderform.qty1.select();
document.orderform.qty1.focus();" /></td></tr>
</table>
<input type="hidden" value="5" name="sh" />
<br />
<center><input type="reset" value="Reset Form">
<input type="submit" value="Proceed to Checkout"> </center>
</form>
<script language="JavaScript">
<!--
f=document.orderform;
f.qty1.value=0; f.qty2.value=0;
f.qty3.value=0; f.qty4.value=0;
f.total1.value=0; f.total2.value=0;
f.total3.value=0; f.total4.value=0;
f.sh.value=200;
f.grandtotal.value=200;
//-->
</script>
</body></html>
<!-- ======= End Content ======== -->
</td></tr>
<!-- ======== Footer ========== -->
<tr><td colspan="2" class="Footer" style="vertical-align: middle;">
Copyright © GrowthEdge
</td></tr></table>
</body>
</html>
I also check my email regularly if anyone has any comments or advice. I know how to edit the CSS, and minute parts of the JavaScript code (for example; speed of the drop). The problem is, I had a massive amount of help making the Javascript side of the menu, and do not know how to edit it... I want the rules to still apply, where only one can be expanded at a time (one of the first drops, and then only one of the sub-drops). I noticed in the code, I can edit it so there can be more than one drop, but that would mean, the whole menu could be expanded Also, I want my sub-drops. to have different span colour than the main drop. but trhe links and such, (everything else about it) can be the same.... My live demo is here! Thank you for any help and/or advice in advance, Best Regards, Tim I am trying to populate a listbox using Javascript. The listbox is populated using the xml response from ajax request. Below is the code used for the same Code: var xmlDoc = xmlhttp.responseXML;
for (var i = 0; i < xmlDoc.getElementsByTagName("id").length; i++) {
traderlists.add(new Option(xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue, xmlDoc.getElementsByTagName("id")[i].childNodes[0].nodeValue));
}
This works fine for me. But i am facing performance issue here. some ajax requests retrieves xmls with around 11,000 nodes and this takes too much of time to populate the listbox. Can anyone please advice me with an better solution? Hi, I have an application wherein for one page I want to display a Listbox on selection of a radio button. There should be 2 radio buttons and when the user clicks on the 2nd one "My Process", a list box should be displayed with several options. Can anybody pls help me with this as I'm a beginner to JS.. Many thanks Pooja. I'm probably not allowed to request something like this, but since this is a small amount of code I think I should do it anyways :P Okey, so I have two listboxes and I want a tickbox to enable one listbox and disable one listbox as you tick a checkbox. I want one listbox disabled by default and the other enabled and then vice-verca the disable when you tick the box. If someone could supply me with that code I would be really greatful, butyou don't need to bother with the HTML, I should figure it out from the JS. Thanks in advance <3 Hi, Iam trying a simple fill listbox on the body load, but its not working. Can someone please help me on this Code: <!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" />
<title>Untitled Document</title>
</head>
<script language="javascript" src="script.js"></script>
<body onload="fillCategory();">
<form id="drop_list" name="form1" method="post" action="">
<label>
<select name="Category" id="Category">
</select>
</label>
</form>
</body>
</html>
and my script.js: Code: function fillCategory(){
addOption(document.form1.Category, "Fiji", "Fiji", "");
addOption(document.form1.Category, "Australia", "Australia", "");
addOption(document.form1.Category, "New Zealand", "New Zealand", "");
}
Hello, I'm trying to fill an array with the values of a listbox from a SQL query but somehow I can only get the first word of each registry Code:
var arrayX=[];
function getValue(){
var x=document.getElementById("combo_color");
for (var i = 0; i < x.options.length; i++) {
if(x[i].value!=''){
arrayX.push(x[i].value);
}
}
}
for example, with the color Green Karanka I only get Green inside the array, the same happens with any color with more than one word, any ideas? Thanks. Hi there, I have a listbox and an Edit button. The user will need to click on the email address in the listbox before clicking on the button to edit. But then, the email address will be displayed on the prompt box's textbox, and even without editing it, the user can get scot-free. I would want to remove the email address on the prompt box's textbox, and also to check for null entries. If it is null, it will display an alert message. Else, it will check if it is a valid email address. My code is as follow: Code: function editItem()
{
var listbox = document.getElementById('listBox'); // listbox control id
var newValue = lst.value;
if(newValue != "")
{
var newItem = prompt("Enter the new email address",newValue);
if(newItem == "")
{
alert("Please key in an email address into the textbox.");
return false;
}
else
{
listbox.options[listbox.selectedIndex] = new Option(newItem,newItem,false,false);
return false;
arrTexts = new Array();
validRegExp =/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/
// search email text for regular exp matches
if (arrTexts.value.search(validRegExp) ==-1 )
{
alert('A valid e-mail address is required.\nPlease try again.');
return false;
}
else
{
for(i=0; i<listbox.length; i++)
{
arrTexts[i] = lst.options[i].text;
}
arrTexts.sort();
for(i=0; i<listbox.length; i++)
{
listbox.options[i].text = arrTexts[i];
listbox.options[i].value = arrTexts[i];
}
}
}
}
else
{
alert('Select Item From The List To Edit ');
}
}
HTML Code: select id="lstBxEmail" name="listBoxEmail" size="6" style="width: 580px;"> <option>figFruit@msn.com</option> <option>apple@hotmail.com</option> <option>cherry@yahoo.com</option> <option>banana@hotmail.com</option> <option>elephantApple@ymail.com</option> <option>durian@gmail.com</option> </select> <select id="listBox" name="listBox" size="3" style="width: 580px;"> <option>hello@msn.com</option> <option>wowAmusers@hotmail.com</option> <option>yrulikethis@yahoo.com</option> </select> Hi, I've been working on a company directory page where a listbox called "People" in a form called "people_form" contains 400 employee names. I made the box "multiple" just so I could have it big and easier to find names but I decided a search box would be really useful. I've looked up a few such search scripts but so far the two I've tried haven't worked. The latest one when it's installed on the page, nothing happens when you type characters into it (it's supposed to jump to an entry matching the first few letters). Although if I backspace then it selects EVERY name in the list Here's the current form with the input tag being the search box (oh the options are populated by java script): <form name="people_form"> <input type="text" id="realtxt" onkeyup="searchSel()"></input> <select onchange="display(this.value); return false;" multiple="multiple" id="People" name="People" style="border-style: none; height:198px; width:220px;"> <option value="">Loading</option> </select></form> And here's the actual search function in the head of the page in the script tags: function searchSel() { var input=document.getElementById('realtxt').value.toLowerCase(); var output=document.getElementById('People').options; for(var i=0;i<output.length;i++) { if(output[i].value.indexOf(input)==0){ output[i].selected=true; } if(document.forms[0].realtxt.value==''){ output[0].selected=true; } } } If you know of a script that will work properly I'd appreciate it. For convenience I'm looking for one that jumps to selections inside the listbox as opposed to one where you click a search button and get results somewhere else. Hi I've been working on a listbox full of employees for our company intranet. Each name has an onchange tag that calls up a floor map and that part works fine but I'd really like to populate the names from an XML list so it's easier for non-IT people to maintain. I've been doing alot of web searches on the subject which comes up alot but it's mostly just fragments of what I need being that I've got no javascript background. I found a helpful tutorial on javascriptkit but that wasn't for creating listboxes so I'm only part of the way there. This is the XML file I've got (there will eventually be 400 entries): <?xml version="1.0"?> <list> <employee> <name>##########</name> <office>1656</office> <officePH>(403)000-0000</officePH> <mobile>N/A</mobile> <email>##########</email> </employee> <employee> <name>#########</name> <office>1657</office> <officePH>(403)000-0000</officePH> <mobile>N/A</mobile> <email>###########</email> </employee> </list> The most important parts are the name which will be used as the text of the box and the office number which will determine which floorplan is displayed. I added the other information so I can potentially put it in a div display later but that can wait. Can anyone help point me to some good resources on this subject? Thanks. Essentially, I have an ASP.net page where I load a record set server side and upload it into a listbox. I'm trying to do all the movement functionalities of the listbox items client side. Specifically, I'm trying to figure out how to copy selected listbox items from one listbox to another -- on button click. I've searched for a while, but every example that I found moves the actual item into another listbox, I just want to copy the selected item to another listbox. I'm very new to JavaScript, so ff someone can provide an example or pseudo code, I would greatly appreciate it. Hi there, I have this listbox that I want the user to select only one choice at a time. How do I disable the multiple selection feature in javascript? <select id="lstBxEmail" name="listBoxEmail" multiple="multiple" style="width: 580px;"> <option>Java</option> <option>PHP</option> <option>Perl</option> <option>Javascript</option> <option>C#</option> <option>Powershell</option> </select> <select id="lstBxEmail" name="listBoxEmail" multiple="multiple" style="width: 580px;"> <option>Java</option> <option>PHP</option> <option>Perl</option> <option>Javascript</option> <option>C#</option> <option>Powershell</option> </select> I have a page with three identical listbox containing items in the same order. When an element is selected from any of the three lists, the script should search for the occurrence of the same element in other two lists and remove them on the fly from all the three lists. How can this be achieved? A script to achieve this is welcomed. Hi there, I would like to do the following: When I click on a button, it will set the item in the listbox to be bold. But this will only happen when the user clicks on the desired item to be bold and presses the button. An alert message will occur when he/she presses the button without clicking on the item, stating that the user will need to click on the item. How shoukld I do it in javascript? Hi, I would like to know how to add/remove items from listbox PERMANENTLY. Sad to say, all I have found are adding/removing items temporarily. Code: <!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>
<title>Untitled Page</title>
<script language="javascript" type="text/javascript" >
function addOption(selectbox,text,value )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
function addOption_list(selectbox)
{
addOption(document.drop_list.SubCat, "One","One");
addOption(document.drop_list.SubCat, "Two","Two");
addOption(document.drop_list.SubCat, "Three","Three");
addOption(document.drop_list.SubCat, "Four","Four");
addOption(document.drop_list.SubCat, "Five","Five");
addOption(document.drop_list.SubCat, "Six","Six");
}
function removeOptions(selectbox)
{
var i;
for(i=selectbox.options.length-1;i>=0;i--)
{
if(selectbox.options[i].selected)
selectbox.remove(i);
}
}
</script>
</head>
<body onload="addOption_list()";>
<form name="drop_list" action="default.aspx" method="post" >
<select id="SubCat" name="SubCat" MULTIPLE size="6" width="10"></select>
<input type="button" onclick="removeOptions(SubCat)"; value='Remove Selected' />
<input type="button" onclick="addOption_list()"; value='Add All' />
</form>
</body>
</html>
Please advise me on the problem. if i have a large script built multi-select-list-box, is there a way within javascript to onClick of a hyperlink, jump-to the line within the select box that corresponds to the value clicked?
<!-- ** Need help completing the javascript in this example ** --> Code: <html> <head> <title>Convert ListBox data into 4 Text Boxes</title> <script language="javascript"> function SplitText ( // NEED HELP WITH THIS CODE split text ","; convert to ['textbox1','textbox2','textbox3','textbox4'] } </script> </head> <body> <form name="convert"> <p style="margin: 2px"> <h3>Convert selected data to textboxes</h3> <!-- SELECT DATA FROM LIST BOX --> <select size="1" name="ListBox" onChange="SplitText();"> <option value="jim,bob,rick,paul" >==Row1==</option> <option value="pete,jack,chris,craig">==Row2==</option> <option value="mary,jane,lisa,kim" >==Row3==</option> </select> </p> <h3>In this example say we selected row1</h3> <!-- THE SELECTED DATA GETS SPLIT AND INSERTED INTO THESE 4 TEXTBOXES --> <p style="margin: 2px"> <input type="text" name="textbox1" value="jim"><br> <input type="text" name="textbox2" value="bob"><br> <input type="text" name="textbox3" value="rick"><br> <input type="text" name="textbox4" value="paul"><br> </p> </form> </body> </html> |
|||||||