问使多选择列表可调整大小

EN

在您的jsFiddle中，我看不到$('#resizable').resizable();，您也没有任何ID为resizable的东西。但是，由于您已经用jQuery标记了它，所以可以通过包含jQuery、.js和.css文件来实现这一点。另外，将resizable的ID添加到控件中，该控件可以调整大小，并引用插件。若要设置最小高度和宽度，请参见下面的代码。我对您的jsFiddle的更改包括：

1. 将id="resizable"添加到select中
2. 添加$( "#resizable" ).resizable();
3. 将jQuery的.css文件添加到外部资源中
4. 将jQuery的.js文件添加到HTML中
5. (可选)若要调整绘图程序的位置，请添加此css .ui-resizable-se { bottom: 'some amount'; right: 'some amount'; }

下面是一个更新的jsFiddle，它不包括我提到的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
    });
});

为了在select中定位拖放图标，我添加了以下css：

.ui-resizable-se { bottom: 18px; right: 25px; }

如果有人无意中发现了这个问题，并且(合法地)不想使用JQuery来解决这个问题，您可以只使用“调整大小”CSS属性：resize.asp。

就提交人而言：

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

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

• 在CSS中，将属性调整为该元素(作者的值为“二者”，以便他可以同时调整宽度和高度)。

#resizable{
  resize: both;
}

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

.list select[multiple] { width: 100%; height: 8em; resize: both; }

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

.list select[multiple] { width: 100%; height: 8em; min-width: 100px; min-height: 100px; resize: both; }

只需添加CSS规则：

select { resize: auto; }