在 jquery 插件中仅更改一种选择样式

Posted 2023-05-09

【中文标题】在 jquery 插件中仅更改一种选择样式

【英文标题】：Change only one select style in jquery plugin

【发布时间】：2020-04-27 03:12:17

【问题描述】：

所以我使用 selected - jquery 插件进行选择。

假设我在网页上有四个选择，我希望最后一个向上打开。我知道如何更改样式以向上打开选择，但我不知道如何仅对一个选择执行此操作。这可能是微不足道的，但我无法在任何地方找到答案

为了安装它，我下载了 chosen.jquery.min.js 和 chosen.css 文件，并将以下代码放入处理所有选择的 js 文件中：

$(document).ready(function() 
  $('select').chosen( width: '100%', disable_search_threshold: 9 );
);

我可能应该为选择添加类，将我想要覆盖的样式添加到 chosen2.css，对吗？但是如何将这些特定的选择与新的 css 文件联系起来呢？

这是我想要完成的任务： fiddle

【问题讨论】：

您是否尝试在选择的课程上使用 :last-child？我不知道“选择”使用什么类来设置元素的样式，但我认为你可以做类似的事情。如果你提供一个 jsFiddle 会更容易提供帮助

【参考方案1】：

已编辑：

我修改了您的小提琴，只需将您的最后一个 select 放入 div 并将您的 css 应用于该 div 内的选择：

Drop Up

<div class="drop-up">
  <div class="box" style="margin-left: 50px; margin-top: 15px;">
    <select class="chosen-select">
        <option selected="selected">10</option>
        <option>20</option>
        <option>50</option>
        <option>100</option>
    </select>
  </div>
</div>

CSS

.drop-up .chosen-container .chosen-drop 
    border-bottom: 0;
    border-top: 1px solid #aaa;
    top: auto;
    bottom: 40px;

如果这就是你要找的东西，请告诉我:)

【讨论】：

谢谢，但这不是我要找的——我编辑了我的问题，你可以在那里找到小提琴——你可以看到两个选择都向上打开——'last-of-type' 没有在这种情况下工作

这正是我想要的！我知道有一些简单的解决方案：）谢谢！

【参考方案2】：

我认为您可以在您的选择标签上使用类或 ID 例如：

$(document).ready(function() 
  $('select.last').chosen( width: '100%', disable_search_threshold: 9 );
);

或

$(document).ready(function() 
  $('#last').chosen( width: '100%', disable_search_threshold: 9 );
);

【讨论】：

但是它们都指向同一个“选择的选择”，所以它们在样式方面仍然是相同的