0

次の選択リストがあります。

リスト 1 を選択:

<select name="productcolor" id="productcolor" onChange="GetAvailProductSizes();">
    <option value=""><? echo $langdata['oneprodpage_selectcolor']; ?>...</option>
    <? foreach ($thisproduct['availcolors'] as $color) { ?>
    <option value="<? echo $color['id']; ?>"><? echo $color['name']; ?></option>
    <? }; ?>
</select>

リスト 2 を選択:

<select name="productsize" id="productsize" style="width: 120px;">
<option value=""><? echo $langdata['oneprodpage_selectsize']; ?>...</option>
</select>

リスト 1 でオプションが選択されていない場合、リスト 2 は空になります。LIST 2 が LIST 1 に依存しているようなものです。

これは、次の関数で作成されます。

<script type="text/javascript"><!--
    function GetAvailProductSizes() {
        $('select#productsize option').remove();
        $('select#productsize').append('<option value=""><? echo $langdata['oneprodpage_selectsize']; ?>...</option>');

        var color = $('#productcolor').val();
        if (color > 0) {
            var availsizes;
            var http_request = new XMLHttpRequest();
            http_request.open( "GET", '<? echo ROOT; ?>/autocompleteavailsizes/?productid=<? echo $thisproduct['id']; ?>&color=' + color, true );
            http_request.send(null);
            http_request.onreadystatechange = function () {
                if ( http_request.readyState == 4 ) {
                    if ( http_request.status == 200 ) {
                        availsizes = eval( "(" + http_request.responseText + ")" );

                        for (var i = 0; i < availsizes.length; i++) {
                            $('select#productsize').append('<option value="' + availsizes[i].id + '">' + availsizes[i].name + '</option>');
                        };
                    } else {
                        alert( "There was a problem with the URL." );
                    }
                    http_request = null;
                }
            };
        };
    }
//-->
</script>

ここで、SELECT LIST 1 に触れなくなるまで、SELECT LIST 2 を非表示にします。PHP または jQuery に関するヘルプをお願いします。ありがとうございました！

4

1 に答える 1

0

2 番目のリストの属性に追加display:noneし、関数内で使用して表示させるだけです。style$('select#productsize').show();

于 2013-01-18T23:27:37.203 に答える