Manipulate Select, Optgroup, Option Boxes
Jul 23, 2005
I have more than once wanted to manipulate the contents of select boxes
dynamically, whilst the boxes contain <optgroup> tags.
Manipulation of a select box containing only <option> tags is fairly
easy and there is plenty of material on the net to assist with this.
However, I have searched long and found the material on the subject of
<optgroup> to be sparse, with a few posts here & there, but basically
you're on your own.
After much trial & error regarding techniques for this, I have a fairly
generic solution, which I decided to share, and the code is below. Two
different scenarios I have come across are (1) altering the contents of
one <select> dynamically depending upon another, and (2) being able
click 'up' and 'down' buttons to alter the sequence of the listing
(whilst keeping each <option> within its respective <optgroup>) I tried
various solutions for both of these which tended to either trash the
screen, alter which <optgroup> an <option> was under or trash the
<optgroup>s altogether.
Both these situations can be handled with the solution here. Basically
I keep the <optgroup>s and <option>s stored in an Array(), and then use
the Array() to reconstruct the <select>.
To use, just manipulate the Array() in memory - which I find very easy
- and then call the function to reconstruct.
I like to build the <select> <optgroup> <option> set using HTML as
normal and then create the Array() with <body as this makes
it usable where javascript is unavailable, rather than have the Array()
as a hard-coded start point. Code:
View 3 Replies
ADVERTISEMENT
Dec 21, 2005
I'm currently working with a bit of javascript to dynamically add
<option>s into a select box. My code currently works fine in Internet
Explorer, however in Firefox the dropdown only displays the first
option in the list, and when clicked the other values aren't displayed.
Here is the code;
//ar_options is an array with the option to be displayed in.
for (count=0; count<number_of_options+1; count++)
{
document.forms['enquiry'].enquirytype.options[count] = new
Option(ar_options[count],ar_options[count]);
};
As I said - fine in Internet Explorer, but not in Firefox. I did
discover some discussions about this, which were talking about an issue
and workarounds but I couldn't get any of them to work. I have also
tried simply using the document.write() function to output the HTML in
the correct place. However this is just hte same, works in IE but not
Firefox.
View 6 Replies
View Related
Mar 3, 2010
Here's what I'm trying to do is...If you select a color, then select a shape, the color option would return to the 'selected' position.If you select a shape, then select a size, the shape option would return to the 'selected' position and so on. The end result is I would like to have only one item selected from one of the select boxes, with the other two select boxes returned to the selected position.The code is presented here.
<html>
<body>
<h2>List Switch</h2>[code].....
View 3 Replies
View Related
Sep 6, 2009
On change of the first drop down i want another drop down list to get populate with optgroup in it
View 1 Replies
View Related
Jul 20, 2005
In a <select> drop-down, the onchange event isn't called when
scrolling through the dropdown using the mouse-wheel and when crossing
over a new <optgroup>.
Using the example below, notice how the onchange event isn't called
when mouse wheel scrolling between A3 and B1, but it works properly
when scrolling between A1 and A2.
E.g.
------------------------------------------
<html>
<body onload="document.forms['myForm'].elements['mySelect'].focus()">
<form name="myForm" id="myForm">
<select onchange="alert('onchange event');" name="mySelect"
id="mySelect">
<optgroup label="Group A">
<option value="A1">A1</option>
<option value="A2">A2</option>
<option value="A3">A3</option>
</optgroup>
<optgroup label="Group B">
<option value="B1">B1</option>
<option value="B2">B2</option>
<option value="B3">B3</option>
</optgroup>
<optgroup label="Group C">
<option value="C1">C1</option>
<option value="C2">C2</option>
<option value="C3">C3</option>
</optgroup>
</select>
</form>
</body>
</html>
------------------------------------------
View 10 Replies
View Related
Jul 24, 2009
<script language="JavaScript" type="text/javascript">
<!--
/*[code]....
// This script supports an unlimited number of linked combo boxed
// Their id must be "combo_0", "combo_1", "combo_2" etc.
// Here you have to put the data that will fill the combo boxes
// ie. data_2_1 will be the first option in the second combo box
// when the first combo box has the second option selected
// first combo box
data_1 = new Option("Business Cards", "$");
data_2 = new Option("Club Flyers", "$$");[code].....
I have this code, and I was wondering if it is possible to make the select boxes appear AFTER you select the field before.
View 8 Replies
View Related
Jun 5, 2009
I have four html form check boxes.The user is allow to choose one or three of the check boxes, the last check box has a value of None.
Example: What's your favorite color.1. Red 2.Blue 3. Green 4. Gray. 5. None.The user can select more then one color.So I'm wondering how can I make the other check boxes deselect when the user click None.So if the user select None, then the other boxes cannot be checked. know you can do this with radio buttons but I would like the user to select more then one option.
View 4 Replies
View Related
Jun 21, 2010
I'm using the following code to remove an option from a select control based on a selection in a different select control and the option text in the select option that is being removed. The code works as I want it to, but I would prefer to use the option value for identifying the option to remove instead of using the option text. I've tried several different ways to do this, but can not find the proper syntax.
[Code]...
View 3 Replies
View Related
Jul 25, 2002
I searched here and some other places on the net but cant find anything that suits my needs. I have a SELECT box with 3 values Code:
<form name="form1">
<select name="length">
<option name="length" value="none">--Select for All--</option>
<option name="length" value="5">--5 Days--</option>
<option name="length" value="7">--7 Days--</option>
<option name="length" value="10">--10 Days--</option>
</select>
</form>
OnChange, I want to invoke a function that auto populates the rest of the SELECT fields in the form. The select boxes will vary in quantity as the page is dynamic, but the values are always the same (like the code above).
Does this make sense?
View 9 Replies
View Related
May 11, 2011
I have a drop down box (select) in my website: [URL] that works fine; but the problems is if the user click on a wrong option, it will show a box and if the user click on another option from the box, the last one will be on display and won't go off..
Like this select something and then at the same box change the selection you will see the code will build up boxes on the screen.. How I do for it not happens if the user change the option in the last box, the one before disappears!
View 6 Replies
View Related
Oct 26, 2005
I wish to know if is possible to change the selected option in a SELECT selecting a determined option into another SELECT in the same form.
E.g: When I select the option "Istruction" in the SELECT named "A" I wish the SELECT "B" change the default state from "empty" to "other"
View 1 Replies
View Related
Jun 21, 2006
I'm using Prototype and scriptaculous either, but here it is:
I have two select areas and scripts to transfer items between the two.
Everything works great in FF, but in IE when an option gets removed it
removes the entire select area. Has anyone ever seen something like
this before?
View 1 Replies
View Related
Aug 11, 2010
According to [URL] intended way for jQuery to change dynamically the selected option of a dropdown select control isassigningthe desired text instead of the value. I found this way veryinconvenient (data structures usually deal with value codes, not value descriptions) and it seems to work only sometimes.
Trying different options I came out with this approach that seems to do the job so
far:
function setSelect(pID,pSelectedValue)
{
$('#'+pID + ' option:selected').removeAttr('selected');
[Code]....
View 1 Replies
View Related
Feb 25, 2009
if i have a <select> and i when i click an image i want to do an onclick event to select a specified option inside the <select> is this possible?
View 1 Replies
View Related
Oct 12, 2009
I have a form that uses jeditable to edit-in-place several fields and select boxes. Everything is working great. Now I need to a way to add a new option to the select list. What I would like is the user select "Add New..." from the select list that would pop-up a dialog window where several fields are filled in. When the form is saved the select field is updated with the new ID and description. I use Facebox for pop-up windows to display notes when the user clicks on a topic. I know Facebox can be used to display a form. It would be ideal to use this ability when creating a new option for the select box.
View 1 Replies
View Related
Apr 2, 2003
How can I automatically select the next option from a select box? I would like a next button to scroll through the options.....
View 2 Replies
View Related
Jul 7, 2011
If I select "Other", a text box pops up and I can type in something and hit Add Item and it will add it to the drop down box, but the selection will stay at "Other". How do I make it select the item I just added?
View 3 Replies
View Related
Jul 20, 2005
We have had this script on our site for a while, and it has always
worked in any browser we have tested. It dynamically fills one select
based on the selection of another select. Unfortunatly, with the
release of NS 7, and the related Mozilla engine, this script no longer
works. Code:
View 2 Replies
View Related
Jul 20, 2005
I have 3 select boxes! one is hotel one is destination and one is
country...
if someone clicks selects the country then the destination select box shows
the destinations in that country and further if he chooses destination all
the hotels in in that destination are shown in hotel select
box....(everything is from mysql database)
I don't have a clue how to do this or where to find some readings about it
and I really need that desperatly....
View 4 Replies
View Related
Mar 5, 2009
I have a form that starts like this: http:[url].....I would like to have it set so that when they select Atlantis, it pulls out information into the second box, then they select something in there and it creates a list in the last box... does anyone know how to do this?
View 2 Replies
View Related
Jul 25, 2009
I am using alot of Select boxes on one of my PHP/XHTML pages and i need to ensure the user has selected at least one option from the box.I have little experience with Javascript, but I tried this;
function madeSelection(elem, helperMsg)
{
if(elem.nodeValue == null)[code].....
All that is happening is its returning a boolean false regardless of whether or not i select an option.
View 2 Replies
View Related
Feb 27, 2002
Info from:
http://www.w3.org/TR/html4/interact/forms.html
I am trying to create a multiple selectable SELECT menu however I also want to have categories in this menu, so the menu might look like:
Category 1
>> Select Option
>> Select Option
>> Category 2
>> >> Select Option
>> >> Select Option
Category 3
>> Selection Option
for example. Now this OPTGROUP would be perfect but it only works one level deep. Can anyone think of an alternative to this, perhaps using javascript which prevents the user from selecting the categories?
View 2 Replies
View Related
Oct 16, 2010
I am trying to add values of selected options in select boxes that update on any change...
I don't know why this is not working [code]...
View 2 Replies
View Related
Nov 15, 2011
I have 3 select boxes (2 visible and 1 hidden ). I move elements from one sb to the other via this function [code]I need to synchronize the hidden select box with one of the visible select boxes. When I move elements to the visible select box they should be also copied to the hidden select box and vice versa, when moving elements from the visible select box, also move them form the hidden select box.
View 5 Replies
View Related
Mar 30, 2006
Each time I dynamically load the options of a select box and then try to do anything with it (such as clicking it or using other JS code on it) I get the following Firefox error:Error: Index or size is negative or greater than the allowed amount = NS_ERROR_DOM_INDEX_SIZE_ERR
I am using the following code:<select id="day" name="day"></select>
<script language="javascript">
var options_list = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31);
selectbox_element = document.getElementById('day');
selectbox_element.options.length = 0; // Remove any previous values.
for (var i = 0; i < options_list.length; i++) {
selectbox_element.options[i] = new Option(options_list[i], options_list[i]);
}
</script>
The "options_list" array is filled beforehand using a simple PHP for() loop.
If I create the exact same options but do so by writing them into the HTML using PHP, then I don't see the error message anymore.
This problem happens in both Firefox 1.5 and Internet Explorer.
View 2 Replies
View Related
Jan 16, 2011
I have a product select page that is really slow to use because 6 dropdowns must be populated and the page reloads after selecting each box, to get the options for the next box.I want to speed it up as follows:
1) User selects one of 50 products from a dropdown list.
2) Page reloads, and all the possible options for the remaining 5 dropdown boxes are now populated (ie. list options all stored client side)
3) User can freely input the remaining 5 dropdowns without the page reloading.
View 2 Replies
View Related
