Question

使用css设置select2的宽度被select2

的javascript调用覆盖

// javascript
$(function() {
  renderSelect("select");
  $("div#s2id_countries").width(300);
});

# HAML example (Rails)
 = select_tag "countries", options_for_select(@countries), class: 'some-ignored-css-class'

相关：How to control the width of select tag?

Answer 1

问题不是javascript，问题是您没有保留CSS。

仅设置宽度的方法是使用CSS。甚至你的JS也设置了CSS（.width）：

.css(width)和.width()之间的区别在于后者返回无单位像素值（例如，400），而前者返回单位完整的值（例如，400px）。他们都设置了CSS＆＃34; style＆＃34;元件

更好的方法是在＆＃34;容器上设置CSS＆＃34;元素，或确保您在调用renderSelect函数时持久保存CSS：

Container

#app/assets/stylesheets/application.css
.container select { width: 50px; }

#app/views...
.container= select_tag "countries", options_for_select(@countries)

使用容器将允许您在容器上设置CSS，从而无需在select本身上使用该类。虽然这意味着添加一个容器div，但它会给你最大的自主权。

-

JS

另一种方法是更改renderSelect功能，使其成为当前select＆amp;的等级。将它附加到新元素。

由于我不了解您的renderSelect功能，因此我只能提供相应级别的建议。

Answer 2

解决方案是再次使用javascript

TitleExtension

啊，Javascript，生活中所有问题的原因和解决方案

（任何改进？）

如何控制select2选择标记的宽度

2 个答案: