0

クロムでは、ドロップダウンリストの項目にスクロールバーが付いている場合があります.ドロップダウンクリック時にスクロールバーなしですべての項目を表示したい. .

以下のコード。

<div class="controls">
                            <select name="teamId" id="teamIdSel" class="span2" >
                                 <?php foreach ($team_list as $team): ?>
                                    <option class="teamSelOpt" diviID="<?php echo $team->division_id; ?>" value="<?php echo $team->team_id; ?>" <?php if ($team->team_id == $teamId) { ?> selected <?php } ?> ><?php echo $team->name; ?></option>
                                <?php endforeach; ?>    
                            </select>
                        </div>

<input type="button" onclick="onChangeDivision('10', null, null)"/>

ここでは、javascript で「diviID」を使用してオプションを動的に表示および非表示にしています。

以下のJavaScript関数。

 function onChangeDivision(id, teamId, clientUserID){
    if(id){
        $('.teamSelOpt').each(function() {
            var diviId = $(this).attr("diviID");
            if(diviId == id){
                $(this).show();
            }else{
                $(this).hide();
            }
        });
}
}

「$(this).hide();」を削除すると 関数からのコードは正常に動作しますが、結果は私の要件に反します。

4

2 に答える 2

0

通常、これらの選択、ファイルのアップロードなどはブラウザや OS 固有であるため、希望どおりにスタイルを設定することはできません。選択ボックスのすべてのブラウザーで一貫性を実現するには、2 つの方法があります。

Method1 :-

div または ul & li を使用して独自のポップアップ タイプのものを作成し、必要な場所に絶対に配置して、ボックスをクリックして表示することができます。

方法 2 :-

jquery plugin dropkickを使用するだけで、選択ボックスを自由にスタイル設定でき、すべてのブラウザで同じように表示されます

于 2012-07-20T11:48:07.093 に答える
0

代わりにリストを使用し、Google プラスで Google が行うように、onhover/onclick で表示する必要があります。ドロップダウンのスクロールバーを非表示にすることはできません。

于 2012-07-20T11:06:09.860 に答える