?
Solved

add more values to a dropdown

Posted on 2010-09-20
8
Medium Priority
?
290 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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 15

Accepted Solution

by:
danrosenthal earned 2000 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

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

600 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