Solved

add more values to a dropdown

Posted on 2010-09-20
8
283 Views
Last Modified: 2013-11-19
hi,

in my page i have in 2 radio buttons

radio_button12 >>12
radio_button34 >>34

i also have a dropdown with the following values

AAA1
BBB2
CCC3
DDD4

now what i want to do is when i select radio_button34 >>34 i want to add two more values to the dropdown list like:

AAA1
BBB2
CCC3
DDD4
EEE5>>new
FFF6>>new

and i want for example the value "FFF6" to be the selected one when the dropdown is publish with the two new values after the radio button selection.

how can i succeed in doing the above?
0
Comment
Question by:eaweb
  • 3
  • 3
  • 2
8 Comments
 
LVL 4

Expert Comment

by:rstjean
ID: 33720668
I have attached a snippet to make things easy.
<script LANGUAGE="JavaScript">
<!--//
function fillCategory(){
 // this function is used to fill the category list on load
addOption(document.drop_list.SubCat,"AAA1", "AAA1");
addOption(document.drop_list.SubCat,"BBB2", "BBB2");
addOption(document.drop_list.SubCat,"CCC3", "CCC3");
addOption(document.drop_list.SubCat,"DDD4", "DDD4");
}

function SelectSubCat(iList){

removeAllOptions(document.drop_list.SubCat);

if(iList == '1'){
addOption(document.drop_list.SubCat,"AAA1", "AAA1");
addOption(document.drop_list.SubCat,"BBB2", "BBB2");
addOption(document.drop_list.SubCat,"CCC3", "CCC3");
addOption(document.drop_list.SubCat,"DDD4", "DDD4");
}
if(iList == '2'){
addOption(document.drop_list.SubCat,"AAA1", "AAA1");
addOption(document.drop_list.SubCat,"BBB2", "BBB2");
addOption(document.drop_list.SubCat,"CCC3", "CCC3");
addOption(document.drop_list.SubCat,"DDD4", "DDD4");
addOption(document.drop_list.SubCat,"EEE5", "EEE5");
addOption(document.drop_list.SubCat,"FFF6", "FFF6");
}
}

function removeAllOptions(selectbox)
{
	var i;
	for(i=selectbox.options.length-1;i>=0;i--)
	{
		//selectbox.options.remove(i);
		selectbox.remove(i);
	}
}

function addOption(selectbox, value, text )
{
	var optn = document.createElement("OPTION");
	optn.text = text;
	optn.value = value;

	selectbox.options.add(optn);
}
//-->
</script>

<FORM name="drop_list" action="test.html" method="POST" >
12<input type="radio" name="addstuff" value="1" onclick="SelectSubCat('1')" />
<input type="radio" name="addstuff" value="2" onclick="SelectSubCat('2');" />34

<SELECT id="SubCat" NAME="SubCat">
<Option value="">AAA1</option>
<Option value="">BBB2</option>
<Option value="">CCC3</option>
<Option value="">DDD4</option>
</SELECT>
</form>

Open in new window

0
 
LVL 15

Expert Comment

by:danrosenthal
ID: 33720801
This should do exactly what you asked for...
<script LANGUAGE="JavaScript">
<!--//
var OptionsAdded = 0
function SelectRadio34(){
	if(OptionsAdded == 0){
		addOption(document.getElementById("DropDownList"),"EEE5", "EEE5");
		addOption(document.getElementById("DropDownList"),"FFF6", "FFF6");
		OptionsAdded = 1;
		document.getElementById("DropDownList").value = "FFF6";
	}
}
function addOption(selectField, value, text )
{
	var opt = document.createElement("OPTION");
	opt.text = text;
	opt.value = value;
	selectField.options.add(opt);
}
//-->
</script>

<FORM name="example1">
radiobutton12: <input type="radio" name="radio1234" value="12" /><BR>
radiobutton34: <input type="radio" name="radio1234" value="34" onclick="SelectRadio34();" /><BR>
<BR>
<SELECT id="DropDownList" NAME="DropDownList">
<Option value="">AAA1</option>
<Option value="">BBB2</option>
<Option value="">CCC3</option>
<Option value="">DDD4</option>
</SELECT>
</form>

Open in new window

0
 
LVL 4

Expert Comment

by:rstjean
ID: 33720923
If you click back on value 12, the EEE5 and FFF6 stay.  Your saving grace was that did put in an OptionsAdded check to make sure you didn't keep adding more option rows..
0
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
LVL 15

Accepted Solution

by:
danrosenthal earned 500 total points
ID: 33721124
Yep...Those 2 values can easily be removed when clicking "radiobutton12" if that is the intent. I couldn't tell from the original description if it was or not. Here is a quick way to do it:
<script LANGUAGE="JavaScript">
<!--//
var OptionsAdded = 0
function SelectRadio34(){
	if(OptionsAdded == 0){
		addOption(document.getElementById("DropDownList"),"EEE5", "EEE5");
		addOption(document.getElementById("DropDownList"),"FFF6", "FFF6");
		OptionsAdded = 1;
		document.getElementById("DropDownList").value = "FFF6";
	}
}
function SelectRadio12(){
	document.getElementById("DropDownList").remove(5);
	document.getElementById("DropDownList").remove(4);
	OptionsAdded = 0;
}	
function addOption(selectField, value, text ){
	var opt = document.createElement("OPTION");
	opt.text = text;
	opt.value = value;
	selectField.options.add(opt);
}
//-->
</script>

<FORM name="example1">
radiobutton12: <input type="radio" name="radio1234" value="12" onclick="SelectRadio12();"/><BR>
radiobutton34: <input type="radio" name="radio1234" value="34" onclick="SelectRadio34();" /><BR>
<BR>
<SELECT id="DropDownList" NAME="DropDownList" size="10">
<Option value="">AAA1</option>
<Option value="">BBB2</option>
<Option value="">CCC3</option>
<Option value="">DDD4</option>
</SELECT>
</form>

Open in new window

0
 

Author Comment

by:eaweb
ID: 33724937
hi,

thanks!

but, how can i do also the following:
removing the two added options when selecting back radio_button12 is great but, is it also possible to put for example option BBB2 as selected?
0
 

Author Comment

by:eaweb
ID: 33725462
ok, i solve getting the BBB2 as selected back it like this

function SelectRadio12(){
      document.getElementById("DropDownList").remove(5);
      document.getElementById("DropDownList").remove(4);
      OptionsAdded = 0;
               
                document.getElementById("DropDownList").value = "BBB2";
}

is it the right way?
0
 
LVL 15

Expert Comment

by:danrosenthal
ID: 33726633
Yep, that will work.
0
 

Author Comment

by:eaweb
ID: 33726765
thanks!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question