在查看先前答案的演示时，我有点困惑，它们都没有奏效。因此，Chrome (v29) 似乎根本不喜欢隐藏选择框上的选项。这可能是 chrome 本身的错误，也可能不是我想尝试解决它的问题。
我的解决方法是使用第二个“假”选择，每次都填充所需的选项，然后使用假选择来驱动真正的选择框。
理想情况下，真正的选择应该被隐藏，但我保持它对演示可见。我试图对 HTML 进行尽可能少的更改，因此大部分更改都在 javascript 内部。
$(document).ready(function(){ // When the document is ready populates the fakelist
$('#ddlAllTemplates option').each(function (index) {
$(this).attr('id', 'option-'+index);
$(this).clone().attr('value', this.id).appendTo('#fakelist');
});
});
$('.radiobutton').change(function () {
var found = false; // Need this for later to find the first matching option
var templateType = $(this).attr("dataval");
$('#fakelist').html(''); // Empty the fakelist
$('#ddlAllTemplates option').each(function (index) {
var extract = $(this).attr('value').split('|')[2];
if (extract == templateType) {
// Clone and push the option on the fakelist
$(this).clone().attr('value', this.id).appendTo('#fakelist');
if (!found) {
found = true;
$(this).prop('selected',true);
}
}
});
});
$('#fakelist').change(function () {
// And select the appropriate ID using the value from the fakelist option.
var selected = $(this).children('option:checked').attr('id');
$('#'+selected).prop('selected',true);
});
这是演示：http: //jsfiddle.net/edYHT/
编辑
我已经用我个人解决问题的方法做了一个演示，总是使用第二个选择框，但在这个演示中，第二个选择框变成了真正的选择框，前一个只是一个数据源（在这次我可能会构建一个 AJAX 脚本来从数据库中获取数据并在每次更改框时进行查询，可能会缓存数据。）
这允许将第二个框发送到表单并大大减少 javascript（并允许非 js 浏览器仍然将数据发送到表单）
我还保留了相同的“值”属性，因为这些值之间并没有真正的唯一 ID，但可能我会使用与数据库匹配的唯一 ID。
最后但不是最后一个，适用于 IE6 及更高版本（已测试），因此您的 IE8 不应该有任何问题。
标记：
<div id="form-step-1" class="form-step-single">
<label for="radio-patient"><input class="radiobutton" id="radio-patient" value="PAT" name="TemplateTypes" type="radio" /> Patient</label>
<label for="radio-employee"><input class="radiobutton" id="radio-employee" value="EMPLOYEE" name="TemplateTypes" type="radio" /> Employee</label>
<label for="radio-machine"><input class="radiobutton" id="radio-machine" value="MACHINE" name="TemplateTypes" type="radio" /> Machine</label>
<select class="selectlist hidden" id="ddl-all-templates">
<option data-type="EMPLOYEE" value="77492|ET_07|EMPLOYEE|08/16/13|08/16/14|Approved|Y|70744">Jean Luc Picard</option>
<option data-type="PAT" value="70470|testing|PAT|08/16/13|08/16/14|Approved|Y|70428">Flash Gordon</option>
<option data-type="PAT" value="70472|testing|PAT|08/12/13|08/16/14|Approved|Y|30213">Jason Voorhees</option>
<option data-type="EMPLOYEE" value="70472|testing|EMPLOYEE|08/13/13|08/16/14|Approved|Y|30213">Freddy Krueger</option>
<option data-type="PAT" value="70472|testing|PAT|08/14/13|08/16/14|Approved|Y|30213">Darth Vader</option>
<option data-type="MACHINE" value="70472|testing|MACHINE|08/14/13|08/16/14|Approved|Y|30213">ED209</option>
<option data-type="PAT" value="70472|testing|PAT|08/14/13|08/16/14|Approved|Y|30213">Michael Knight</option>
</select>
<select class="selectlist" id="fakelist" name="AllTemplates">
<option data-type="EMPLOYEE" value="77492|ET_07|EMPLOYEE|08/16/13|08/16/14|Approved|Y|70744">Jean Luc Picard</option>
<option data-type="PAT" value="70470|testing|PAT|08/16/13|08/16/14|Approved|Y|70428">Flash Gordon</option>
<option data-type="PAT" value="70472|testing|PAT|08/12/13|08/16/14|Approved|Y|30213">Jason Voorhees</option>
<option data-type="EMPLOYEE" value="70472|testing|EMPLOYEE|08/13/13|08/16/14|Approved|Y|30213">Freddy Krueger</option>
<option data-type="PAT" value="70472|testing|PAT|08/14/13|08/16/14|Approved|Y|30213">Darth Vader</option>
<option data-type="MACHINE" value="70472|testing|MACHINE|08/14/13|08/16/14|Approved|Y|30213">ED209</option>
<option data-type="PAT" value="70472|testing|PAT|08/14/13|08/16/14|Approved|Y|30213">Michael Knight</option>
</select>
</div>
JS：
$('.radiobutton').change(function () {
var type = $(this).val();
$('#fakelist').html('');
$('#ddl-all-templates option').each(function (index) {
if (type == $(this).attr('data-type'))
$(this).clone().appendTo('#fakelist');
});
});
和演示:) http://jsfiddle.net/B6nEs/
最后一次编辑，我保证：JS 甚至可以更小：
$('.radiobutton').change(function () {
$('#fakelist').html('');
$('#ddl-all-templates option[data-type="'+$(this).val()+'"]').each(function() {
$(this).clone().appendTo('#fakelist');
});
});