更改选择选项列表的宽度

Question

是否可以定义选择列表的宽度？如果是这样，怎么办？ select标签没有属性width。

<select data-bind="options: names, value: selectedName, optionsText: 'Name', optionsValue: Name, optionsCaption: Select Person"></select>

Answer 1

使用css

<style>
    select { width: 30%; /*or something like it*/ }
</style>

Answer 2

您可以使用attr绑定，并在样式中设置宽度：

视图模型：

function ViewModel() {
    var self = this;
    self.selectWidth = ko.observable();
    self.selectWidthStyle = ko.computed(function() {
        return "width:" + self.selectWidth() + "px";
    });
}

HTML：

<select data-bind="attr: {style: selectWidthStyle}"></select>

Demo