How to filter select box options with 2 radio buttons?

@postsingularJul 06.2009

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?

to post a comment

JavaScript

@tianxzJul 06.2009 — #you can use the event of onchange to redefine the value of select box.

@postsingularauthorJul 06.2009 — #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..

@tianxzJul 06.2009 — #<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>

@postsingularauthorJul 07.2009 — #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>[/CODE]

@tianxzJul 08.2009 — #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?

How to filter select box options with 2 radio buttons?

5 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How to filter select box options with 2 radio buttons?

5 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

5 Comments(s) _↴

Also in #JavaScript _↴