asked on

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?

rstjean

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

danrosenthal

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

rstjean

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..

ASKER CERTIFIED SOLUTION

danrosenthal

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

eaweb

ASKER

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?

eaweb

ASKER

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?

danrosenthal

Yep, that will work.

eaweb

ASKER

thanks!