阻止下拉寬度擴大

我有兩個動態下拉列表。第二個下拉列表中顯示的選項取決於第一個下拉列表中選擇的內容。第一個下拉菜單有2個選項。如果選擇第二個選項，那麼第二個下拉列表中顯示的值就是非常長的字符串（確切地說就是網址）。有什麼辦法可以阻止擴展的下拉寬度？阻止下拉寬度擴大

這裏的的jsfiddle結果： http://jsfiddle.net/pgbw56vb/10/embedded/result/

http://jsfiddle.net/pgbw56vb/10/

<select id="kategorie_oder_seite"></select> 

<select id="auswahl"></select> 


var data = { 
"Kategorie": ["Kraft", "Startseite", "Insurance", "Risk",], 
"Seite": ["http://jsfiddle.net/tony089/pgbw56vb/2/", "https://stackoverflow.com/users/login?returnurl=%2fquestions%2fask"], 
}; 


var $kategorien = $("#kategorie_oder_seite").on("change", function() { 
var seiten = $.map(data[this.value], function(seite) { 
    return $("<option />").text(seite); 
}); 
$("#auswahl").empty().append(seiten); 
}); 

for (var kategorie in data) { 
$("<option />").text(kategorie).appendTo($kategorien); 
} 

$kategorien.change();

在此先感謝。

來源

2014-10-28 Anthony Okoth

'<選擇ID = 「auswahl」風格= 「寬度：150像素;」>' - 添加固定的寬度到您的選擇標記。 – 2014-10-28 07:44:34

您可以在一定寬度的選擇與#auswahl ID如下補充：

CSS：

#auswahl { 
    width:200px; 
}

來源

2014-10-28 07:44:39

是，

用途：

#auswahl{ 
    max-width:50px; 
}

例如。

來源

2014-10-28 07:45:43 azhpo

#auswahl { 
max-width:100px; 
width:100px; 
}

添加此CSS類文件

來源

2014-10-28 08:02:26 yugi

添加CSS：

#auswahl{ 
    width:50%; 
}

來源

2014-10-28 08:05:18 renjith

如前所述幾次在這裏，你可以限制第二個下拉的大小通過添加width或max-width與CSS 。

或者您可以限制字符串的長度，您在下拉列表中顯示爲選項。

喜歡的東西

var seiten = $.map(data[this.value], function(seite) { 
    return $("<option>" + seite.substring(0, 15) + "</option>"); 
});

來源

2014-10-28 08:59:56 uruk

阻止下拉寬度擴大

回答

相關問題