Hide items within 1 dropdown list using radio buttons jquery

2
votes

Basically what I want to do is have 1 dropdown list (with all options) and when I click a radio button it only displays specific options from the dropdown list.

For example, I have 2 radio buttons and 6 options:

radio-button1, radio-button2

option1,
option2,
option3,
option4,
option5,
option6,

If I press radio-button1, it will only display option1, option2, option3 in the dropdown list. If I press radio-button2, it'll display the other 3.

Currently I just use the show/hide functions and 2 separate dropdown list to do this.. but I was wondering how to do it within 1 dropdown list. Any advice would be appreciated cheers.

3
jquery
Welcome to SO. Please read the FAQ section completely. It will help you in understanding how to ask question, how to accept answer, how up/down vote question/answer. - Amar Palsapure

3 Answers

3
votes

You can check this jsFiddle: http://jsfiddle.net/Chran/2/

HTML

<div>
<input type="radio" name="test" checked="checked" value="Apple" /> Apple<br />
<input type="radio" name="test" value="Orange" /> Orange

<br />
<select ID="DropDownList2" Height="18px" Width="187px">
    <option Value="Apple_Style_1">Apple Style 1</option>
    <option Value="Apple_Style_2">Apple Style 2</option>
    <option Value="Apple_Style_3">Apple Style 3</option>
    <option Value="Orange_Style_1">Orange Style 1</option>
    <option Value="Orange_Style_2">Orange Style 2</option>
    <option Value="Orange_Style_3">Orange Style 3</option>
</select>
</div>​

JavaScript

var options = $("#DropDownList2").html();
$('#DropDownList2 :not([value^="App"])').remove();
$('input:radio').change(function(e) {
   var text = $(this).val();
   $("#DropDownList2").html(options);
   $('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();
});​

Things to look after:

  • You have jQuery loaded before you execute this code.
  • The casing of value for radio button should match to value of select options

Hope this helps you.

0
votes
<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript">
        function dropHider(type) {
            $("select#drop").find("option").each(function() {
                if ($(this).attr("rel") == type) {
                    $(this).removeAttr("disabled");
                } else {
                    $(this).attr("disabled","disabled");
                }
            });
        }
    </script>
</head>
<body>
    <input type="radio" name="type" value="Food" onClick="dropHider(this.value)"> Food<br />
    <input type="radio" name="type" value="Drink" onClick="dropHider(this.value)"> Drink<br />
    <select id="drop">
        <option rel="Food" value="Pizza" id="1">Pizza</option>
        <option rel="Food" value="Burger" id="2">Burger</option>
        <option rel="Food" value="Fish" id="3">Fish</option>
        <option rel="Drink" value="Coke" id="4">Coke</option>
        <option rel="Drink" value="Lemonade" id="5">Lemonade</option>
        <option rel="Drink" value="Fanta" id="6">Fanta</option>
    </select>
</body>
</html>

This should work for you; hope it helps

-1
votes

You just have to assign an unique ID to each option, and use show/hide according to what you want to do when you select radio-buttons. All options can be in the same list, and you show/hide list elements using its ID.