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 1

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.