Jquery 使多选列表可调整大小

如何调整此多选列表的大小？我想设置列表的默认高度和宽度以及最小高度和宽度，但可以自己调整大小

我试过了，但没有成功：

<div id="resizable" class="ui-widget-content">
   <h3 class="ui-widget-header">Stored Procedures</h3>
<div class='list'> 

<select multiple="multiple" height="5" data-bind="options:storedProceduresInDB1, selectedOptions:selectedStoredProceduresInDb1"> </select>

<div>
    <button data-bind="click: copyToDb2, enable: selectedStoredProceduresInDb1().length > 0">Copy to DB2</button>
</div>
</div>
</div>


$(function() {
    $( "#resizable" ).resizable();
});

存储过程
复制到DB2
$（函数（）{
$（“#可调整大小”）.resizable（）；
});

---

在您的JSFIDLE中，我没有看到

$（“#resizable”）.resizable（）并且您没有ID为
可调整大小的任何内容。但是，由于您已经用jQuery对其进行了标记，因此可以通过包含jQuery.js和.css文件来实现这一点。另外，向将可调整大小的控件添加一个ID
resizeable
，并引用插件。要设置最小高度和宽度，请参见下面的代码。我对JSFIDLE的更改包括：

将
id=“resizeable”
添加到您的
select
添加了
$（“#可调整大小”）.resizable（）

将jQuery的.css文件添加到外部资源中
将jQuery的.js文件添加到HTML
（可选）要调整拖动器的位置，请添加以下css
.ui resizeable se{bottom:'some amount'；right:'some amount'；}
这里是一个更新的，它不包括我提到的css或设置最小高度和宽度

以及守则：

<select id="resizable" multiple="multiple" height="5" 
    data-bind="options:storedProceduresInDB1, 
    selectedOptions:selectedStoredProceduresInDb1"></select>

$(function() {
    $('#resizable').resizable({
        // to set the min height and width
        minHeight: 100,
        minWidth: 200
        // you could also set a maxHeight and maxWidth as well
    });
});

如果有人遇到这个问题，并且（合法地）不想使用JQuery来解决这个问题，您可以使用“resize”CSS属性：

就提交人而言：


添加一些id或类，以便我们可以在css中针对该元素



在CSS中，将属性resize添加到该元素中（作者的值为“both”，以便他可以调整宽度和高度）


实际上，没有必要向“select”元素添加id，我们只需在JSFiddle中CSS文件的第6行添加“resize”属性：

。列表选择[多个]{宽度：100%；高度：8em；调整大小：两个；}


最后，您可以使用经典的css属性min height和min width来设置选择的最小大小：

。列表选择[多个]{宽度：100%；高度：8em；最小宽度：100px；最小高度：100px；调整大小：两个；}
只需添加CSS规则：

select { resize: auto; }

我更新了我的答案，在作者的案例中加入了应该做的事情。
#resizable{
  resize: both;
}

select { resize: auto; }