9

ドロップダウン部分として使用したいカスタムテーブルがありますDropDownList。

テーブル

理想的には、ユーザーがをクリックするDropDownListと、通常のドロップダウンではなくカスタムテーブルが表示されます。DropDownListコントロールを無効にせずにドロップダウンが開かないようにするのは簡単だと思いましたが、そうではないようです。

DropDownListを無効にせずに開くのを防ぐ簡単な方法はありますか？

編集：これは組み込みのIE 7 Webブラウザーでe.preventDefault()機能する必要があり、そのブラウザーのバージョンでは機能しません

4

4 に答える 4

7

あなたはこのようなことをすることができます：

基本的に、私はそれをブロックするためにドロップダウンの上に非表示のdivを配置しました、そしてあなたはマスキングdivのonclickでクリックを処理することができます。

編集：私はこのhttp://jsfiddle.net/EdM7B/1/を更新しました

<div id='mask' onclick='alert("clicked");' style='width:200px; height:20px; position:absolute; background:white;filter:alpha(opacity=0);'></div>
<select id='selectList' show=1 style='width:200px; height:20px;'>
    <option>Test</option>
</select>

IEは、背景色が設定されていないdivを適切にレンダリングしていないようで、正しく機能していなかったため、一種のハックを使用する必要がありました。これは私のIE7で動作します。

すべてのブラウザで機能させたい場合は、chrome / firefox不透明度CSSを追加するか、IEのみのCSSを使用して背景色を適用する必要があります。

上に配置されているため、要素が絶対的に配置されているため、不透明度は実際には正しく機能していないと思います。どちらの方法でも機能しているように見えます。もともと不透明度1でしたが、見えないようにしたいので、0に変更しました。

于 2012-06-07T12:12:09.793 に答える
4

event.preventDefaultイベントでjQueryを使用すると、ドロップダウンリストの表示を停止できmousedownます（デモ：http：//jsfiddle.net/RCCKj）。

この関連する質問も参照してください：選択をクリックしたときにドロップダウンリストを表示するには、Chromeを停止します

于 2012-06-01T13:01:32.087 に答える
2

次のようにdiv内に配置します。

    <div id="dllDiv" style="width:200px;height:200px;">
        < asp:DropDownList ID="DropDownList1" runat="server" style="z-index:-1000px;pointer-events:none;">
        < /asp:DropDownList>
    </div>

cssプロパティpointer-eventsをnoneに設定する必要があります。そうすると、テーブルをdivに非表示にするか、ajaxを使用して次のようにロードできます。

   (document).ready(function() {
        $("#dllDiv").click(function() {
            alert('adasd');
        });
    });
于 2012-05-31T22:24:39.297 に答える
0

これにメガメニューを使用することを考えたことがありますか？たとえば、テーブルなど、ドロップダウンした部分に好きなものを入れることができます

于 2012-05-31T21:06:41.633 に答える