Question

我正在尝试使用Formstone中名为“selecter”的jQuery插件来设置选择列表的样式。 CSS的最大宽度设置为30％，这正是我页面上发生的事情，这比我想要的要大得多。（我也不喜欢它是动态的。）我想根据具体情况控制宽度。该文档具有以下选项：

定义一个自定义CSS类，在同一页面上有多个视觉上不同的选择器：

$("select").selecter({
    customClass: "custom"
});

对我来说似乎合乎逻辑的是，如果我想要有多个宽度，我应该能够做到以下几点：

 $("select").selecter({
        customClass: "width1, width2, width3"
 });

...然后在CSS中定义这些类，如：

.width1 {
    width: 200px;    
}

.width2 {
    width: 300px
}

等

...并将select标签设置为：

<select class="width1">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

不幸的是，这似乎对页面没有影响。

我也尝试过：

$("select").selecter({
    customClass: document.getElementById("select1").style.width="200px";
});

然后在引号内：

$("select").selecter({
    customClass: "document.getElementById("select1").style.width="200px";"
});

...并且从选择框中完全删除了所有样式，看起来好像根本没有安装插件。

我应该如何在jQuery插件中设置customClass以获得所需的结果？我想我可以将每个选择列表放在自己的DIV中，并将插件的CSS文件中的最大宽度更改为100％，但这对我来说似乎有点荒谬。

Answer 1

如果将自定义类作为参数传递给.selecter()，它将应用于通过调用插件实例化的所有Selecter实例。另外，正如您所见，您无法直接将该课程放在<select>上，因为Selecter正在隐藏它并显示自己的自定义创建

因此，如果您计划使用多种类型的选择框，则可以将该自定义类作为data-选项包含在该特定<select>上。 Selecter将阅读并尊重此选项。

<select name="selecter_custom" data-selecter-options='{"customClass":"width1"}'>

...

$('select').selecter();

现在，您可以按照您的预期将宽度应用于.width1。