使用bootstrap的DropDownList没有正确对齐所选的值

Question

我正在开发一个MVC网站并使用bootstrap和jQuery向用户显示两个bootstrap dropdownList，其设计与图片显示的# Start app and proxy CMD service nginx start && nodejs /src/index.js 相同：

当用户选择显示的值但对齐不正确时，这里是所选下拉列表值的图像：

如您所见，左侧未显示值，第一个下拉列表显示中间的值，第二个下拉列表显示输入中心的值，并显示相同值的第一个字母。结束，请你帮我调整所选的值。

<div class="form-group">

$(document).ready(function () {
    $("#fddl").click(function () {
        var selText = $(this).text();
        $('#ddl1').find('#textaux').val(selText);
    });

    $("#sddl").click(function () {
        var selText2 = $(this).text();
        $('#ddl2').find('#textaux2').val(selText2);
    });
});

Answer 1

您应该添加到选择器中以处理click li元素。

点击下拉列表中的项目后，您应该获得该项目的click处理程序。

您正在进行的操作方式是获取下拉菜单的全部内容并设置为input

只需改变：
这个$("#fddl")的{​​{1}} 以及此$("#fddl li")

的$("#sddl")

$("#sddl li")

$(document).ready(function () {
    $("#fddl li").click(function () {
        var selText = $(this).text();
        $('#ddl1').find('#textaux').val(selText);
    });

    $("#sddl li").click(function () {
        var selText2 = $(this).text();
        $('#ddl2').find('#textaux2').val(selText2);
    });
});