|
JavaScript - Selecting One Select List Box Item Selects All?
I currently have two html select list boxes side by side on a form, two buttons in between the boxes to move items from list box to the other, and a javascript function to control the movement of the items from one box to the other. Here is the javascript:
Code:
function MoveSelected(from, to) {
var lstFrom = $(from);
var lstTo = $(to);
for (var i = 0; i<lstFrom.length;i++) {
if ( lstFrom[i].selected ) {
var elOptNew = document.createElement('option');
elOptNew.text = lstFrom[i].text;
elOptNew.value = lstFrom[i].value;
try {
lstTo.add(elOptNew, null); // standards compliant; doesn't work in IE
} catch(ex) {
lstTo.add(elOptNew); // IE only
}
}
}
for (var i = lstFrom.length-1; i>=0;i--) {
if ( lstFrom[i].selected ) {
lstFrom.options[i] = null;
}
}
}
Here are the two html form select list boxes (lstAvailProd is the starting list box that lists the initial data and lstSelectProd is the destination list box): Code:
<td width="10%" valign="center">
<a href="javascript: MoveSelected('lstAvailProd','lstSelectProd');"><IMG SRC="buttons/right_arrow.gif" style="padding-bottom: 2px;" /></a><br /><br />
<a href="javascript: MoveSelected('lstSelectProd','lstAvailProd');"><IMG SRC="buttons/left_arrow.gif" /></a>
</td>
I was wondering if anyone could tell me how I could modify my code to allow for the selection of all the data in the starting list box by only selecting and moving the first item in the list to the destination list box? The first item is called "All Products", so instead of actually selecting every product in the starting list and moving them to the destination list, I would like the code to see that if the "All Products" list item is moved to the destination list, move all the other list items in the destination list back to the starting list. Here's an example of what the code for each list box looks like: Starting List Box: Code:
<select name="lstAvailProd" id="lstAvailProd" multiple="true" size="8" style="width: 250px;">
<option value="-1">{All Products}</option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
<option value="4">Product 4</option>
<option value="5">Product 5</option>
</select>
Destination List Box: Code: <select name="lstSelectProd" id="lstSelectProd" multiple="true" size="8" style="width: 250px;"> </select> Any help would be appreciated, thanks!! Similar TutorialsI have two drop down lists , list1, list 2. I want it to change according to the radio button selected by the user. If the user selects radio button1, lists1 should be displayed. If the user selects radio button2, lists2 should be displayed. How can i achieve this using javascript. Please somebody help me. hi again hi i want to create a form Form have 2 submit buttons also have one drop down list when selecting dropdown list item disable the one submit button plzzzzzz help m for do this with sample code needed. I have up to 3 dropdown lists that I can select using javascript functions. Depending on what I select in the first dropdown loads what is in the 2nd drop down and so on. i want to be able to select the first drop down and it skips the 2nd one and displays the 3rd one. How do I do that with the current functions I am using. Code: function cboSourceChange(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1=0&cboSub2=0&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
function cboSub1Change(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2=0&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
function cboSub2Change(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2="+iSub2+"&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
function cboSub3Change(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
var iSub3 = document.frmHarvestForm.cboSub3.options[document.frmHarvestForm.cboSub3.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2="+iSub2+"&cboSub3="+iSub3+"&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
I have a cgi script (using perl for database queries) in which I have two select boxes. I am populating the left select box with rows from a database, and then provide buttons for people to move items to the right select box. So far so good, everything works, the move right, move left, and move right all and move left all buttons work, data is always sorted in both lists. My only problem is, when I click the submit button, the follow up program only displays data that was highlighted/selected in the right select box, not all of the data in the right select box. I don't know how to tell the script, via javascript, to highlight everything in the right select box when the submit form button is clicked. I would think i could just call a function via -onClick for the submit button. I could use some help with the function to select all data in that list. I can post code if it is helpful. Thanks, Taylor Hi, I have a list setup with links. The list scrolls with the css setting of overflow:auto. However, when a link in the list that is scrolled down to (that is hidden unless scrolled down to) is clicked, I'd like to hold the list at that list item so that the viewer can return to the same line in the list and click the next li. Right now, the list resets to the top after a li link is clicked... I have a feeling this is something simple, but I'm guessing it would be javascript...?? The site to view - click here and then see the left side scrolling list. Thanks!! I'm trying to delete a item in a list. I'm getting a method not allowed error in IE8. Code: var selectOptions = document.getElementById('id_employees_cbo');
for (var i=0; i<selectOptions.options.length; i++)
{
if (selectOptions.options[i].selected == true)
{
selectOptions.options[i].remove();
break;
}
}
Is there another way to do this? Thanks Ok so let's say I have this dropdown with a list of these items: PALCO TRIBUNA ORO And in a button on the page I want to send it one of those names, let's say I send it ORO, and through Javascript select that in the dropdown list. How is this done? Do I have to iterate through everything, and how? Thanks for any help in the subject. I'm tearing my hair out with this one and can't figure out why it won't work, and am hoping someone could help a Javascript noobie out. Basically, I need the script to hide two divs if one of the options in a <select> menu is selected. Here's the code I've got for the Javascript: Code: function typeoflisting() {
var selectform = document.getElementById('propertytype');
if (selectform.options[selectedIndex].value == "sell") {
document.getElementById('per_week').style.display = 'none';
document.getElementById('bond').style.display = 'none';
}
else {
document.getElementById('per_week').style.display = 'block';
document.getElementById('bond').style.display = 'block';
}
}
Here's the <select> form: Code: <select id="propertytype" name="propertytype" class="select" onchange="typeoflisting()"> <option value="lease">I'd like to lease a property to tenants</option> <option value="sell">I'd like to sell a property</option> <option value="share">I'd like to share a property</option> </select> And here's the first div I'm attempting to hide: Code: <div id="per_week" style="float: left;"> per week</div> And the second div I'm attempting to hide: Code: <div style="float: left; padding: 20px 20px 0px 0px;" id="bond"> <h3>Bond</h3> <input type="text" class="text" value="$"/> </div> Could anyone please tell me what I'm doing wrong? This is the code that I have:- Code:
ListItem[1] = new Option("A List Item", "listitem1");
ListItem[1].style.display = "none";
The first line creates a new entry in the list, I am wanting the second line to remove the same item but it doesn't work. I have tried this:- Code: ListItem[1] = new Option("");
But that leaves a blank line entry in the list Cheers Daniel. This is the code that I have, on selecting the first item in the first list it populates the second list with users. What I need to do is create a "value" for each of the items in the second list. Cheers Dan. Code: <html>
<head>
<title>Create Form Elements</title>
<script language="javascript">
<!--
function CreateUsers() {
var Primary = document.newforms.site.selectedIndex;
if ((Primary == null) || (Primary == 0)) return;
if (Primary == 1) {
var Users = new Array;
Users[0] = new Option("user1");
Users[1] = new Option("user2");
Users[2] = new Option("user3");
Users[3] = new Option("user4");
Users[4] = new Option("user5");
Users[5] = new Option("user6");
Users[6] = new Option("user7");
Users[7] = new Option("user8");
Users[8] = new Option("user9");
Users[9] = new Option("user10");
Users[10] = new Option("user11");
Users[11] = new Option("user12");
Users[12] = new Option("user13");
}
for (i=document.newforms.SelectUser.options.length; i>0; i--) {
document.newforms.SelectUser.options[i] = null;
}
for(i=0; i<Users.length; i++) {
document.newforms.SelectUser.options[i] = Users[i];
}
document.newforms.SelectUser.options[0].selected = true;
}
</script>
</head>
<body>
<form name="newforms" ID=Form1>
Choose Country:
<select name="site" onChange="CreateUsers()" ID=Select1>
<option value="">Choose Site</a>
<option value="site1">Site1</a>
<option value="site2">Site2</a>
</select>
<select name="SelectUser" ID=Select2>
<option value="1">Choose User</option>
</select>
</form>
</body>
</html>
Hello all, I am having a problem, and since I am quite new in the Javascript code I hope somebody can help me here. This is my current code: Code: <select class="Form" name="opties"> <option value="AAA">AAA</option> <option value="BBB">BBB</option> <option value="SLX" selected>Selecteer optie</option> </select> Now my intention is the following: When the option with value SLX gets selected it needs to get a special css style. It is not a problem to give the option this style in the list itself, but once selected it always changes to the original style (standard font and color) in Chrome and Mozilla. Now I searched on the net and sometimes I find things like this: Code: function displayOption(divName)
{
document.getElementById(divName).innerText=document.form1.select1.options[document.form1.select1.selectedIndex].value;
}
<select class="Form" name="opties" onChange="displayOption('div1');">
<option value="AAA">AAA</option>
<option value="BBB">BBB</option>
<option value="SLX" selected>Selecteer optie</option>
</select>
But I suppose this always changes the style of the selected item? It only needs to change when the option SLX is chosen... Anyone knows how to solve this problem? Hiya! I'm a total JS beginner, so any help is appreciated. I've created the simple select box below that will "onchange" when an item is selected. I'm trying to apply the "selected" or "selected="selected" attribute to items that are chosen from the menu. Example: The goal is to show " <option value="/1" selected="selected"> " when page "/1" is chosen and to show <option value="/1"> when /1 is not the current page. I've follow a few simple tutorials with no luck and even tried php conditionals to trigger the "selected" attribute with no luck. Any feedback is GREATLY appreciated, thank you! Code: <form name="guideform" method="get"> <select class="wptdb_jumpbar_select" name="mymenu" onChange="window.location=document.guideform.mymenu.options[document.guideform.mymenu.selectedIndex].value"> <option value="/1">Home Page #1</option> <option value="/2">Home Page #2</option> <option value="/3">Home Page #3</option> <option value="/4">Home Page #4</option> </select> </form> I have the following code. I am trying to add an item in the unorderedlist sing javascript when. the new list item is added when the checkbox is checked. And iam trying to remove the corresponding list item when the checkbox is unchecked. Is it possible? Any help from the web gurus will be greatly appretiated. Code: <html>
<head>
<title>Insert title here</title>
<script type="text/javascript" language="JavaScript">
function Addlistitem(list_id) {
var chname = document.getElementById(list_id).name;
if (document.getElementById(list_id).checked == true) {
var element = chname;
var container = document.getElementById('myList');
var new_element = document.createElement('li');
new_element.innerHTML = element;
container.insertBefore(new_element, container.firstChild);
document.getElementById('newElement').value = "";
}
else {
alert("its unchecked");
//need help here to delete the added list item when its corresponding checkbox is unchecked.
}
}
</script>
</head>
<body>
<form name="form1"/>
<input type="checkbox" name="ch1" id="c1" onclick="JavaScript:Addlistitem('c1');"
value="10" />
<input type="checkbox" name="ch2" id="c2" onclick="JavaScript:Addlistitem('c2');"
value="11" />
<input type="checkbox" name="ch3" id="c3" onclick="JavaScript:Addlistitem('c3');"
value="12" />
<input type="checkbox" name="ch4" id="c4" onclick="JavaScript:Addlistitem('c4');"
value="13" />
<input type="checkbox" name="ch5" id="c5" onclick="JavaScript:Addlistitem('c5');"
value="14" />
<input type="checkbox" name="ch6" id="c6" onclick="JavaScript:Addlistitem('c6');"
value="15" />
<input type="checkbox" name="ch7" id="c7" onclick="JavaScript:Addlistitem('c7');"
value="16" />
<ul id="myList">
</ul>
</form>
</body>
</html>
Hey Guys When a user changes the select list called "reason_code_master" I need the uodatecodes() function to update all the other select list with the id of "reason_codes" with the same . How can I do this. <select size='1' onchange="updatecodes()" name='reason_code_master'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> <select size='1' name='reason_codes' id='reason_codes'> <option value='' > - SET REASON - </option> <option value='BROKEN' >BROKEN</option> <option value='ENTERED' >ENTERED</option> <option value='SHORT' >SHORT</option> </select> Hi Peers, i have a Drop down list with 10 choices (skillset). users must choose one skillset and the corresponding level (beginer/intermediate/master). ( they have to do this 10 times for all the sillsets) what i want is : 1 - i need to show up only one record (dropdowanlist) with level then have a button to add new skill and level if required 2- then when they choose the 1st skill from the dropdown , this one will not show up on the 2nd choice dropdown. is it possible any help ? thanks guys Hello everyone, after a few days of looking i give up i just don't know what to look for or how to do it. on this website "http://www.hunlock.com/blogs/Everything_You_Ever_Needed_To_Know_About_Video_Embedding there is a section called How to make a video select list. I have been able to replicate and modify it to my liking how ever i have one issue. i can't make my videos fullscreen. The videos have and give the option for full screen but the fullscreen doesn't work. i prefer this kind of code because it allows my webpage to select a video without changing the webpage and play it, i find it much more smoother then then multiple embedded videos in tabs (i don't even know what to call it so thats what i call it) just incase the website doesnt work or something i will post the script first part<div id='videoPlayback' style='width: 435px; height:350px; background-color: #800000;'></div> then <div id='selectDemo1' style='display: none'> <object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/-is63goeBgc"></param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/-is63goeBgc&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"> </embed> </object> </div> <div id='selectDemo2' style='display: none'> <object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/c6SHsF1n9Qw"></param> <param name="wmode" value="transparent"></param> <embed src="http://www.youtube.com/v/c6SHsF1n9Qw&autoplay=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"> </embed> </object> </div> then <A HREF="#" onclick='return playVideo("selectDemo1","videoPlayback")'>RvD2: Ryan vs. Dorkman 2</A><BR> <A HREF="#" onclick='return playVideo("selectDemo2","videoPlayback")'>Beatboxing Flute </A><BR> and finally<script type="text/javascript"> function playVideo(sourceId, targetId) { if (typeof(sourceId)=='string') {sourceId=document.getElementById(sourceId);} if (typeof(targetId)=='string') {targetId=document.getElementById(targetId);} targetId.innerHTML=sourceId.innerHTML; return false; } </script> i'm not sure the exact functions or how to write this kinda stuff from scratch so if you have any helpfull additions or suggestions please let me know. How can i get the below function to only select a value from the select list when there is an exact match. Let's say I type 54 in the text box it immediately selects 54921 value from the list? Code: <html>
<head>
<title>test</title>
<script type="text/javascript">
function change_uids(uid){
var uids = document.getElementById("uids");
for (var i=0; i<uids.options.length; i++){
if (uids.options[i].value.substr(0,uid.value.length) == uid.value){
uids.options[i].selected = true;
break;
}
}
}
</script>
</head>
<body>
<form action="test.html" method="get">
<label for="uid">Your ID:</label><input type="text" id="uid" name="uid" onkeyup="change_uids(this)"/>
<select id="uids" size="7" >
<option value=""></option>
<option value="12844">12844</option>
<option value="54921">54921</option>
<option value="54922">54922</option>
<option value="25643">25643</option>
<option value="61423">61423</option>
<option value="43903">43903</option>
<option value="58345">58345</option>
<option value="61934">61934</option>
</select>
</form>
</body>
</html>
I want to validate a select list that looks like the below select list. How can I do this when it is named "status[]". <select size='4' MULTIPLE name='status[]'> <option value='COMPLETE'>COMPLETE</option> <option value='ENTERED'>ENTERED</option> <option value='INSTALLED'>INSTALLED</option> </select> How do I reset selct lists like below. <form> <select size='4' STYLE='width: 164px' MULTIPLE id="num" name='num[]'> <option value='1' selected>1</option> <option value='2' selected>2 </option> <option value='3' selected>3</option> </select> <input type="button" name="reset" > </form> Hi there, Is there any way in JS to convert all items in a Select to a numbered list? I can imagine something like Code: for (Scount=0;Scount<select.length;Scount++) and then process each value in the Select to a numbered list, but I can't figure out how and there seems to be no one on the internet with the same goal... Am quite a newbie! Thanks in advance for your help! Thomas |
|||||||