2

スパンを近くに置いた選択ボックスがあるので、次のようになります。

___________________          ___________________
| Sort By: opt1 v |    ->    | Sort By: opt1 v |
|_________________|          |_________________| 
                             :.......opt2......:
                             :.......opt3......:

それ以外の：

        ___________                    __________
Sort By:|  opt1 v |    ->      Sort By:| opt1 v |
        |_________|                    |________| 
                                       :..opt2..:
                                       :..opt3..:

私のjsfiddleを参照してください。それは私が使おうとしているすべてのhtml、css、jqueryを持っています。

問題： 選択ボックスは、表示されているオプション名をクリックした場合にのみ機能します。スパンのクリック（1つには「並べ替え：」が含まれ、もう1つにはカスタムのドロップダウン矢印imgが含まれます）を選択要素のクリックに転送する必要があります。これが私が試したことです：

$('span').click(function(){
    var sb = $('select');
    //none of these work! Please help!
    sb.select();
    sb.click();
    sb.focus();
});

いくつかの免責事項：

  • 特定のオプションを選択したくありません。選択ボックスをクリックした場合と同じように、選択ボックスを開いてすべてのオプションを表示したいと思います。
  • jqueryプラグインselectboxの使用は許可されていません。
4

4 に答える 4

1

プログラムで選択を開くことはできません。

于 2012-12-06T15:52:50.107 に答える
0

私の知る限り、これ（ユーザーによるコントロールの操作を模倣する）を行うことは許可されていません。おそらく、選択要素置換ウィジェットの使用を検討する必要があります。

于 2012-12-06T15:52:23.453 に答える
0

sort by:テキストをラベルにして、その'for'属性を設定することができます。これにはJavaScriptは必要ありません。

<label for="s_featured">Sort By: </span>
<select id="s_featured" ...>
  ...
</select>

これは私がテストしたデスクトップブラウザで選択をロールダウンしませんが、選択に焦点を合わせます、そしてそれは意味的に正しい方法です。モバイルブラウザで望ましい効果が得られる可能性があります。

一部のユーザーエージェントにはそれを実行する方法さえない可能性があるため、選択をロールダウンすることはおそらく不可能です。これは、選択がラベルを介してフォーカスされたときに何をするかはブラウザ次第です。

複数選択は通常のドロップダウンのようには見えないことに注意してください。また、単一選択もそうではない場合があります。W3Cは要素の動作のみを定義し、レンダリング方法は定義しません（たとえば、firefoxとchromeはファイル入力を非常に異なる方法でレンダリングし、どちらも準拠していることに注意してください）。

于 2012-12-06T15:56:35.140 に答える
0

選択ボックスに、テキストと矢印を含む背景画像を作成することができます。を使用するappearance: noneと、ネイティブの矢印は描画されません。左右のパディングを使用すると、目的の機能をほぼ実現できます。これはおそらくクロスブラウザではないことに注意してください。必ずテストしてください：http：//jsfiddle.net/5xcHm/16/。

背景画像を作成するためのいくつかのキャンバスコード：

var w = $(".sb").outerWidth();
var h = $(".sb").outerHeight();

var canvas = $("<canvas>").attr({
    "width": w,
    "height": h
}).get(0);
var ctx = canvas.getContext("2d");

$.extend(ctx, {
    font: "9pt sans-serif",
    textBaseline: "middle"
});

ctx.fillText("Sort By:", 5, h/2+1);

ctx.moveTo(w - 15, 5);
ctx.lineTo(w - 5, 5);
ctx.lineTo(w - 10, 15);
ctx.closePath();
ctx.fill();

var url = canvas.toDataURL("image/png");
$(".sb").css("background-image", "url(%)".replace("%", url));

そしてCSS：

.sb {
    -webkit-appearance: none;  /* mind the prefixes */
    padding-left: 55px;
    padding-right: 15px;
    position: absolute;
    background-repeat: no-repeat;
    background-position: left center;
}
.sortOptionContainer {
    position: relative;
}
于 2012-12-06T19:14:32.053 に答える