add more values to a dropdown

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?
eawebAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
danrosenthalConnect With a Mentor Commented:
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
 
rstjeanCommented:
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
 
danrosenthalCommented:
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
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
rstjeanCommented:
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
 
eawebAuthor Commented:
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
 
eawebAuthor Commented:
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
 
danrosenthalCommented:
Yep, that will work.
0
 
eawebAuthor Commented:
thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.