Javascript 如何在选择中仅显示部分未下拉的选项文本
我在网页上有一个下拉选择框，用于选择例如客户代码-这是一个在现有数据库中用于表示客户的短代码 为了使UI更易于使用，我希望在下拉列表中显示更多信息，而不仅仅是代码，例如客户全名 但是，由于篇幅的原因，我不希望在选择框中显示客户名称，而只显示代码 有人能提出一个相当简单的方法来做到这一点吗？如果有帮助的话，我目前正在项目中使用jquery 总结-当选择关闭时，我只想显示客户短代码。当它被下拉时，我想在每个选择选项中显示代码和全名Javascript 如何在选择中仅显示部分未下拉的选项文本,javascript,jquery,html,Javascript,Jquery,Html,我在网页上有一个下拉选择框，用于选择例如客户代码-这是一个在现有数据库中用于表示客户的短代码 为了使UI更易于使用，我希望在下拉列表中显示更多信息，而不仅仅是代码，例如客户全名 但是，由于篇幅的原因，我不希望在选择框中显示客户名称，而只显示代码 有人能提出一个相当简单的方法来做到这一点吗？如果有帮助的话，我目前正在项目中使用jquery 总结-当选择关闭时，我只想显示客户短代码。当它被下拉时，我想在每个选择选项中显示代码和全名 我突然想到，我可以通过更改选项文本来实现这一点，具体取决于下拉列表是
我突然想到，我可以通过更改选项文本来实现这一点，具体取决于下拉列表是否打开。但是，我似乎找不到在下拉菜单打开和关闭时触发的事件。这是不可能的。我建议您构建一个自定义droprown，例如：
<div class="dropdown">
<span class="dropdown-label">1234</span>
<select>
...
</select>
</div>
在这种情况下，使用CSS，您可以将范围放在选择和使用指针事件的顶部：无。因此，当用户单击范围时，它下面的选择将接收单击并打开。然后，只需在选择某个选项时侦听select的更改事件以更新标签，使用您想要显示的任何内容。使用$'设置所选下拉项的文本。下拉选项：selected'.texttext并使用javascript string.split对值进行拆分，该值可能是将客户代码与名称分隔开的空格。我非常喜欢这个答案 但是我没有足够的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>
您想要更多关于所选元素的详细信息，但较少关于未选元素的详细信息，并且在用户切换选择时切换这些信息？因此，当您单击客户代码时，您会在所选下拉元素中获得该客户代码的更多信息？我对您所问问题的评估是否正确？否。当“选择”下拉时，我希望看到客户代码和名称的列表，以便用户可以选择一个。当一个控件被选中并且下拉列表关闭时，我只想看到选中的代码，而不是名称。遗憾的是，没有一个已经编写的控件可以这样做。我将使用什么样的CSS将跨度放置在“选择”的顶部，理想情况下不会遮挡下拉箭头？我可以用javascript来做，但这会很复杂，因为大小可能会根据数据内容和窗口大小而变化。保持选择箭头会很困难，因为每个浏览器都有自己的选择设计。我建议你自己制作一个下拉箭头作为背景图片，或者用一个图标，比如说字体真棒。您应该在div中使用position:relative，然后在span和select中使用position:absolute，将它们一个放在另一个上面。使用“上”、“左”、“右”和“下”来定位它们，并为跨度指定更大的z索引。这肯定只会在所选选项上显示名称？我想在下拉列表打开时显示所有名称以帮助用户选择一个，但在下拉列表关闭时不显示名称。哦，我误解了！