jQuery:根据单选按钮选择更改可选择的下拉选项 [英] jQuery: change selectable dropdown options based on radio button selection

问题描述

我有一个php网络表单，当用户选择一个单选按钮时，我只希望下拉菜单中的某些选项可用.因此，例如，如果我从广播组中选择房屋，则只希望用户看到房屋1 ，房屋2 和房屋下拉菜单中的3 选项.

I have a php web form, when user selects a radio button, I want only certain options to be available in the dropdown. So for example, if I select House from my radio group, I only want the user to see the House1, House2 and House 3 options in the dropdown.

使用jquery可以吗?如果是这样，我该如何编码?

Is that possible using jquery? If so, how would i code this?

jsFiddle在这里: http://jsfiddle.net/justmelat/kkk7J/

html此处:

<form method="post">
    <fieldset id="Group1" name="Group1">
    <legend>Group box</legend>
    <input id="Radio1" name="Radio1" type="radio" value="House" />House<br />
    <input id="Radio1" name="Radio1" type="radio" value="Condo" />Condo<br />
<input id="Radio1" name="Radio1" type="radio" value="Boat" />Boat<br />
    </fieldset><br/><br/>

    <fieldset id="Group2" name="Group2">
    <legend>Group Options</legend>
    <select id="Select1" name="Select1">
    <option value="HO-House 1">House 1</option>
    <option value="HO-House 2">House 2</option>
    <option value="HO-House 3">House 3</option>
    <option value="CO-Condo 1">Condo 1</option>
    <option value="CO-Condo 2">Condo 2</option>
    <option value="CO-Condo 3">Condo 3</option>
    <option value="BO-Boat 1">Boat 1</option>
    <option value="BO-Boat 2">Boat 2</option>
    <option value="BO-Boat 3">Boat 3</option>

    </select></fieldset></form>

谢谢.

推荐答案

它可能看起来像这样:

$(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/

这篇关于jQuery:根据单选按钮选择更改可选择的下拉选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！