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。

问题： 选择框仅在您单击可见选项名称时才起作用。我需要将跨度（一个包含“排序方式：”，另一个包含自定义下拉箭头 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 回答