How to filter select box options with 2 radio buttons?

**postsingular** · 07-06-2009 11:15 AM

Hi!

I need to filter options of a select box element with two radio buttons. The options are generated by a php script.

Both radio buttons have a search string, and has to hide all options of the select element not containing the search string. For example, if user selects radio1, all select box options not containing the string "abc" has to disappear.

Any suggestions?

**tianxz** · 07-06-2009 01:16 PM

you can use the event of onchange to redefine the value of select box.

**postsingular** · 07-06-2009 01:34 PM

Yes, I know that search and display/hide fuctions must be connected to onchange fuctions of radio buttons. But how can I search for text inside options of the select box?

Can anybody give me a sample code?
Oh, and sorry for my bad english..

**tianxz** · 07-06-2009 02:08 PM

<html>
<head>
</head>
<body>
<select id='fruit'>
<option id="apple">abcApple</option>
<option id="orange">Orangeabc</option>
<option id="pineapple" selected="selected">Pineapple</option>
<option id="banana">Banana</option>
</select>
<button onclick="del()">dfdfdfd</button>
</body>
<script>
del=function()
{
var fruit=document.getElementById("fruit")
var fo=fruit.getElementsByTagName("option");
var l=fo.length;
var dele=[];
for (var i=0;i<l;i++)
{
alert(fo[i].value+'\n'+fo[i].value.search(/abc/i));
if(fo[i].value.search(/abc/i)<0)
{
dele.push(fo[i]);
}
}
for(i=0,l=dele.length;i<l;i++)
{
fruit.removeChild(dele[i]);
}

}
</script>
</html>

**postsingular** · 07-07-2009 10:13 AM

Thanks for your code! I have changed it for my needs.
Can you tell me how can I reset all options to display="block" without knowing their ID? Both radio buttons has to reset the style of options before searching.

Code:

<script language="javascript" type="text/javascript">
	function female()
	{
		var shirtselector=document.getElementById("shirtselector");
		var fo=shirtselector.getElementsByTagName("option");
		var l=fo.length;
		var dele=[];
		
		for (var i=0;i<l;i++)
		{
			if(fo[i].value.search(/f?rfi/i)<0) // here we search for a given string
			{
				dele.push(fo[i]);
			}
			else // if string is found inside option, we do this with the option:
			{
				fo[i].style.display = "none";
			}
		}
	}


	function male()
	{
		
		var shirtselector=document.getElementById("shirtselector");
		var fo=shirtselector.getElementsByTagName("option");
		var l=fo.length;
		var dele=[];

		for (var i=0;i<l;i++)
		{
			if(fo[i].value.search(/n?i/i)<0) // here we search for a given string
			{
				dele.push(fo[i]);
			}
			else // if string is found inside option, we do this with the option:
			{
				fo[i].style.display = "none";
			}
		}
	}

</script>

**tianxz** · 07-08-2009 09:39 AM

I think you do that:
var shirtselector=document.getElementById("shirtselector");
for (var i=0,l=shirtselector.childNodes.length;i<l;i++)
{
shirtselector.childNodes[i].style.display="block";
}

do you think so?

Thread: How to filter select box options with 2 radio buttons?

Thread Tools

Display

How to filter select box options with 2 radio buttons?

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions