www.webdeveloper.com
Results 1 to 6 of 6

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

  1. #1
    Join Date
    Jul 2009
    Posts
    3

    How to filter select box options with 2 radio buttons?

    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?

  2. #2
    Join Date
    Nov 2008
    Posts
    82
    you can use the event of onchange to redefine the value of select box.

  3. #3
    Join Date
    Jul 2009
    Posts
    3
    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..

  4. #4
    Join Date
    Nov 2008
    Posts
    82
    <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>

  5. #5
    Join Date
    Jul 2009
    Posts
    3
    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>

  6. #6
    Join Date
    Nov 2008
    Posts
    82
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles