1

私はphpWebフォームを持っていますが、ユーザーがラジオボタンを選択したときに、ドロップダウンで特定のオプションのみを使用できるようにしたいのです。したがって、たとえば、ラジオグループからHouseを選択した場合、ドロップダウンにHouse1 、 House2、およびHouse3のオプションのみが表示されるようにします。

jqueryを使用してそれは可能ですか？もしそうなら、私はこれをどのようにコーディングしますか？

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>

前もって感謝します。

4

3 に答える 3

3

次のようになります。

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

于 2012-12-07T15:12:04.073 に答える
2

最も簡単な方法は、選択したオプションにcssクラスを割り当て、それらを表示/非表示にすることです。

デモ： http： //jsfiddle.net/9Tbpq/

<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>Select</option>
            <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>​

。

<script>
jQuery(function($) {
    $('input:radio').change(function(){
        var val = $('input:radio:checked').val();
        console.log(val)
        $('#Select1').val(0)
        $('option[value]').hide();
        $('option[value*="-' + val + '"]').show();
    });
});​
</script>
于 2012-12-07T15:18:40.940 に答える
2

id「Radio1」の要素が2つあります。おそらくそれを変更する必要があります。

コードはここにあります：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();
});​

すべてのブラウザが非表示をサポートしているわけではないため、要素を切り離す必要があります<option>。さらに、少なくとも一部のブラウザは、現在選択されているオプションが非表示になっても、それを保持します。これらは両方とも切り離すことで簡単に解決できます。

于 2012-12-07T15:24:20.723 に答える