|
JavaScript - Add/remove Items In Listbox Permanently
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. Similar TutorialsEssentially, 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, I would like to prevent the addition of duplicate items in the following situation. Firstly, I have a listbox with a few options such as Code: <select id="listbox" name="listbox" multiple="multiple" style="width: 580px;">
<option>Java</option>
<option>PHP</option>
<option>Perl</option>
<option>Javascript</option>
<option>C#</option>
<option>Powershell</option>
</select>
Next, I have a submit button with a textbox. The user will be able to submit new options into the listbox via the textbox and submit button. Therefore, I need to prevent the user from entering duplicate items into the listbox. How should I do? The following code is used to add items into the listbox. Code: function addItem()
{
var lst = document.getElementById('listbox'); // listbox control id
var newItem = prompt("Enter New Item","Enter Value Here");
//Option object is created for every option in a selection
//new Option([text[, value[, defaultSelected[, selected]]]]) // Syntax
if(newItem == null)
{
return false;
}
else
{
lst.options[lst.length] = new Option(newItem,newItem,false,false);
return false;
}
}
Hi there, I would like to sort the items regardless of uppercase/lowercase after moving them to another listbox. Here is my code, and I cannot figure out what is wrong with it. 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 MoveItem(unselectedLst, selectedLst)
{
var unselectedEmail = document.getElementById(unselectedLst);
var selectedEmail = document.getElementById(selectedLst);
var uValue = unselectedEmail.value;
var sValue = selectedEmail.value;
if ((uValue != null) && (sValue != null))
{
if( unselectedEmail.options.selectedIndex >= 0 )
{
var newOption = new Option(); // Create a new instance of ListItem
newOption.text = unselectedEmail.options[unselectedEmail.options.selectedIndex].text;
newOption.value = unselectedEmail.options[unselectedEmail.options.selectedIndex].value;
selectedEmail.options[selectedEmail.length] = newOption; //Append the item in selectedEmail
unselectedEmail.remove(unselectedEmail.options.selectedIndex); //Remove the item from unselectedEmail
//sort items in listbox in alpha order
arrTexts = new Array();
for(i=0; i<unselectedEmail.length; i++)
{
arrTexts[i] = unselectedEmail.options[i].text;
}
arrTexts.sort();
for(i=0; i<unselectedEmail.length; i++)
{
unselectedEmail.options[i].text = arrTexts[i];
unselectedEmail.options[i].value = arrTexts[i];
}
//sort items in listbox in alpha order
arrayTexts = new Array();
for(i=0; i<selectedEmail.length; i++)
{
arrayTexts[i] = selectedEmail.options[i].text;
}
arrayTexts.sort();
for(i=0; i<selectedEmail.length; i++)
{
selectedEmail.options[i].text = arrayTexts[i];
selectedEmail.options[i].value = arrayTexts[i];
}
}
}
else
{
alert('Select Item From The List. ');
}
}
</script>
</head>
<body>
<table width="300">
<tr>
<td>
<select id="ListBox1" name="ListBox1" size="6">
<option>One</option>
<option>Two</option>
<option>Three</option>
</select>
</td>
<td>
<p>
<input onclick="MoveItem('ListBox1', 'ListBox2');" type="button" value="->" />
</p>
<p>
<input onclick="MoveItem('ListBox2', 'ListBox1');" type="button" value="<-" />
</p>
</td>
<td>
<select id="ListBox2" name="ListBox2" size="6">
<option>allalong@msn.com</option>
<option>boys@hotmail.com</option>
<option>cy@yahoo.com</option>
<option>bread@hotmail.com</option>
<option>eetApple@ymail.com</option>
<option>applepie@gmail.com</option>
</select>
</td>
</tr>
</table>
</body>
</html>
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, I am new to development in javascript. I want to remove items in an array by passing index values. The index values may have 1 or more values. For example, i have the following array var arr1=new Array("aa","bb","cc","dd","ee","ff"); var index = new Array(); index[] = 3; index[] = 5 Using the above index values, i want the output as "aa","bb","cc","ee" when i used the slice function, i am not getting the desired output like the one above. Can someone please help me out? Thanks Raja Hello I've been in a hick-up trying to edit a JS code to perform a certain task, or literally speaking; sit there permanently on the webpage? now this is the code: Code: $("#nav_search a").click(function(){
$("#toggle_background").slideUp();
$("#toggle_search").slideToggle();
$("#main_search").focus();
return false;
and i would like to know if there's a way to permanently display the object instead of having the user to click>show? thanks in advance Greetings Programmers. I'm a graphics artist by trade but I also dabble in web design. I registered to this forum because I need your help. I've been handed a web project at work - to build an intranet site. My coding skills in HTML are sufficient to get the job done and I can plug in some JS and trobleshoot where needed but I've hit a wall with regard to one seemingly simple piece of code - I can't find a script anywhere that will generate a radio button that will, once selected, stay that way pretty much forever...or until I delete the listing on the page where these buttons will sit. I realize this isn't the concept behind these buttons but I need it to function this way because I'd like it to serve as a quick visual notification that a given employee review has been completed. These reviews will remain online for up to several months because there will be three reviews per employee over the course of that time. The selected buttons will indicate the reviews that are complete while the unselected ones will indicate which ones are still pending. I'd like the various levels of management viewing this information to know instantly, via the buttons, where we are with these reviews. So, that's my question, can a radio button be scripted to stay selected indefinitely once it's been clicked on? Thank you in advance for any help. It's greatly appreciated. - Sgt. Spanky I need educating please. I have a javscript page (fred.js) that contains some variables and some code. I want to be able to change the variables (in particular an array) within fred.js on the server and store the new version of fred.js back on the server. I can write a php routine that stores the array in a MySQL table. Now I want to know how to write some code (and in what language) to read the MySQL table and update fred.js and store it back onto the Server. Can someone please tell me what language I should be using to do this (Ajax??) so that I can do some reading please. I could of course simply write some php code to read the table and pass the parameters to a js page and build the array as each person accesses the web page but this would be slow. Hence I would prefer to have the ability to update the js page and store it back onto the server. 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 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, 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 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? 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. 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> 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?
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? |
|||||||