無法設置的jQuery多的寬度選擇

我使用一個jQuery多選擇下拉爲了給用戶一個機會，從下拉菜單中選擇多個項目下來無法設置的jQuery多的寬度選擇

HTML代碼：

<div class="jobdiv"> 
    <img src="~/Images/traj.png" width="22" height="24" /> 
    @Html.DropDownListFor(model => Model.TrajName, @Model.Traj, 
    new { @class = "jobdrpdown", id = "drpTraj", onchange = "GetSelectedTraj(this.value); ", multiple = "multiple" }) 
</div>

的樣式被定義爲如下：

.jobdiv { 
    margin-right: 15px; 
    margin-left: 15px; 
    padding-bottom: 12px; 
}  

.jobdropdown { 
    width: 194px; 
    font-size: 13px; 
    font-family: Arial; 
    margin-right: 5px; 
    height: 24px; 
}

在$(document).ready(function()：

$(document).ready(function() { 

    $('#drpTraj').multiselect({ 
     nonSelectedText: 'Select items below', 
     width : 180, 
     minWidth : 180   
    }); 

}

我的問題是我無法設置下拉列表的寬度。我爲幾個組件使用相同的樣式。但單獨的jquery multiselect並沒有得到width屬性。見下圖：

此外，當我選擇幾個項目，選定的文本超出了指定的寬度。如果我使用的是正常的下拉它工作正常，在這種情況下

：見圖像的下方。預先感謝任何有價值的建議。

來源

2016-12-07 ViVi

如果你讓一個jsfiddle，我認爲人們會更有動力來幫助:) –

不需要小提琴，檢查我發佈的答案。 ;） –

您是否嘗試過使用設置的.css()寬度：

$('#drpTraj .ui-multiselect').css('width', '100%');

我使用的是相同的風格幾部分組成。

你可以設置讓您的style在classes選項類：

$('#drpTraj').multiselect({ 
    nonSelectedText: 'Select items below', 
    classes : "your-class-name"  
});

希望這有助於。

來源

2016-12-07 12:47:39

嘗試了兩種解決方案。但仍然行爲是一樣的 – ViVi

請嘗試提供一個小提琴或片段，重現您的問題。 –

發生這種情況是因爲multiselect會將您的選擇轉換爲標記，但不夠快樂，它將刪除您應用於選擇的所有類。所以最好的辦法，使之服從你，是有應用到對象ID類：

#drpTraj{ 
    width: 350px; 
}

希望這有助於。

來源

2016-12-07 14:36:07

我試過了。它不工作。 – ViVi

您是否使用瀏覽器控制檯檢查了是否不是另一個錯誤？當我試圖修復我的項目時，Jquery.multiselect.js拋出一個錯誤，告訴我AndSelf（）不是一種可識別的方法。我已經將Jquery版本更改爲1.6.4，然後工作，但只使用id。 http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js –

無法設置的jQuery多的寬度選擇

回答

相關問題