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

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