Solved

add more values to a dropdown

Posted on 2010-09-20
8
282 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Suggested Solutions

Title # Comments Views Activity
Make Line Items Look Good Over Mobile 2 61
Javascript tutorials with real examples 5 26
Why doesn't Google directions work? 6 46
How to show span when clicked on? 10 22
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

777 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