Question

我有两个动态下拉列表。第二个下拉列表中显示的选项取决于在第一个下拉列表中选择的内容。第一个下拉列表有2个选项。如果选择了第二个选项，则响应中第二个下拉列表中显示的值是非常长的字符串（确切地说是url）。有什么办法可以阻止下拉的宽度扩大吗？

这是JSFiddle的结果： http://jsfiddle.net/pgbw56vb/10/embedded/result/

<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();

提前致谢。

Answer 1

您可以使用#auswahl ID为选择添加特定宽度，如下所示：

CSS：

#auswahl {
    width:200px;
}

Answer 2

是，

使用：

#auswahl{
    max-width:50px;
}

例如。

Answer 3

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

将此css类添加到文件

Answer 4

添加CSS：

#auswahl{
    width:50%;
}

Answer 5

如前所述，您可以通过在CSS中添加width或max-width来限制第二个下拉列表的大小。

或者您可以限制您在下拉列表中显示的字符串长度。

像

这样的东西

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

停止展开的下拉宽度

5 个答案: