Question

我在网页上有一个下拉选择框，用于选择（例如）客户代码 - 这是在现有数据库上用来代表客户的简短代码。

为了使用户界面更易于使用，我希望在下拉列表中显示的信息不仅仅是代码 - 例如客户全名。

但是，出于空间原因，我不希望客户名称在未下拉时显示在选择框中，只是代码。

有人能建议一个相当简单的方法吗？我目前正在项目中使用jquery，如果有任何帮助的话。

总结一下 - 当select关闭时，我想只显示客户的短代码。当它被删除时，我想在每个选择选项中显示代码和全名。

我发现我可以通过更改选项文本来执行此操作，具体取决于下拉列表是否打开。但是，我似乎无法找到下拉列表打开和关闭时触发的事件。

Answer 1

那是不可能的。我建议你构建一个自定义的droprown，例如：

<div class="dropdown">
    <span class="dropdown-label">1234</span>
    <select>
        ...
    </select>
</div>

在这种情况下，使用CSS，您可以将span放在select之上并使用pointer-events: none，这样当用户点击span时，{{1 （在它下面）接收点击并打开。然后只需要选择选择的select事件来选择选项时更新标签，无论你想要显示什么。

Answer 2

使用$('.dropdown option:selected').text("text")设置所选下拉项的文本，并在将客户代码与名称分隔的值（可能是空格）上使用javascript string.split()。

Answer 3

我非常喜欢Gabriel的答案但是我对CSS没有足够的经验，所以我决定显示完整的答案举一个非常有用的例子：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>

    <style>
    #the_td_of_time_zone{
        position: relative;
        width: 50px;
    }

    #the_span{
        /*To align text horizontally and vertically inside the parent*/
        text-align: center;
        vertical-align: middle;
        line-height: 20px; /* The same as your parent height */
        pointer-events: none; /*allow the click to pass through the element*/
        position: absolute; /*To help overlap Zone with dropdown*/
        z-index: 100; /*To put the Zone on top of the dropdown*/
        background-color: #006699; /*To match with Admin Menu background*/
        height: 20px;
        width: 100%;
        left: 0px;
        text-decoration: None;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 12px;
    }

    }
    #the_select{
        position: absolute;
    }
    </style>


    <div id="the_td_of_time_zone">
        <span id="the_span">Time Zone</span>
        <select id="the_select">
            <option>uno</option>
            <option>dos</option>
        </select>
    </div>

</body>
</html>

如何在选项文本未下拉时仅显示部分选项文本

3 个答案: