jQuery：根据单选按钮选择更改可选择的下拉选项
我有一个php web表单，当用户选择一个单选按钮时，我只想在下拉列表中提供某些选项。 例如，如果我从我的广播组中选择House ，我只希望用户在下拉列表中看到House1 ， House2和House 3选项。
这有可能使用jquery吗？ 如果是这样，我将如何编码？
jsFiddle这里： http ： //jsfiddle.net/justmelat/kkk7J/
这里的HTML：
先感谢您。
它可能看起来像这样：
$(function(){ var select = $('#Select1'), options = select.find('option'); $('[type="radio"]').click(function(){ var visibleItems = options.filter('[value*="' + $(this).val() + '"]').show(); options.not(visibleItems).hide(); if(visibleItems.length > 0) { select.val(visibleItems.eq(0).val()); } }); });
演示： http ： //jsfiddle.net/kkk7J/2/
您有两个id为“Radio1”的元素。 你应该改变它。
代码在这里： http ： //jsfiddle.net/kkk7J/5/
//record of temporarily removed options var oldoptions = []; $("[type=radio]").on('click', function () { //add all filtered options back $("#Select1").append(oldoptions); //Remove any option whose text does not contain the text of the selected //radio button oldoptions = $("#Select1 option:not(:contains(" + $(this).val() + "))").detach(); });
分离元素是必要的，因为并非所有浏览器都支持隐藏 。 此外，至少某些浏览器将保留当前选定的选项，即使它被隐藏。 这些都可以通过分离轻松解决。
最简单的方法是将css类分配给选择选项并显示/隐藏它们。
演示： http ： //jsfiddle.net/9Tbpq/
。