如何在<select>文本旁边而不是下面显示<select>选项？
要实现在<select>文本旁边而不是下面显示<select>选项，可以使用自定义样式和一些JavaScript代码来实现。下面是一个示例的解决方案：
首先，使用CSS样式来隐藏原生的<select>下拉选项：
.select-dropdown {
display: none;
}接下来，使用JavaScript来创建一个模拟的下拉选项列表，并将选项显示在<select>文本旁边：
<!DOCTYPE html>
<html>
<head>
<style>
.select-dropdown {
display: none;
}
.custom-dropdown {
position: relative;
display: inline-block;
}
.custom-dropdown select {
display: none;
}
.custom-dropdown .dropdown-list {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background-color: #f9f9f9;
border: 1px solid #ccc;
border-radius: 4px;
padding: 5px;
z-index: 9999;
}
</style>
</head>
<body>
<div class="custom-dropdown">
<label for="custom-select">选择一个选项：</label>
<select id="custom-select">
<option value="option1">选项1</option>
<option value="option2">选项2</option>
<option value="option3">选项3</option>
<option value="option4">选项4</option>
</select>
<div class="dropdown-list">
<span class="dropdown-item">选项1</span>
<span class="dropdown-item">选项2</span>
<span class="dropdown-item">选项3</span>
<span class="dropdown-item">选项4</span>
</div>
</div>
<script>
const select = document.getElementById("custom-select");
const dropdownList = document.querySelector(".dropdown-list");
select.addEventListener("click", function (e) {
dropdownList.classList.toggle("show");
});
const dropdownItems = document.querySelectorAll(".dropdown-item");
dropdownItems.forEach(function (item) {
item.addEventListener("click", function (e) {
const value = e.target.innerHTML;
select.value = value;
dropdownList.classList.remove("show");
});
});
</script>
</body>
</html>在上述示例中，我们使用了一个自定义的下拉选项列表（.dropdown-list），并在需要的位置显示该列表。当用户点击文本框时，下拉选项列表将显示或隐藏。
请注意，上述示例中的JavaScript代码只提供了基本的下拉选项交互功能，你可以根据需要进行自定义和修改。此外，你还可以根据自己的需求添加样式和动画效果来改进用户体验。
对于腾讯云相关产品和产品介绍链接地址，由于禁止提及特定品牌，建议你在腾讯云官方网站搜索相关产品并查看其文档以获取更多信息。
相关·内容
如何显示选项，以便在文本旁边显示，而不是在下面显示？<select id="mySelect" onchange="myFunction()"> <optionvalue=&
浏览 30提问于2020-09-29得票数 0
我有国家代码下拉列表，在选择选项文本有国名和ISD代码在一起，但我只想显示ISD代码后选择。<select class="form-control-input" name="country_isd_code" id="country_isd_code"> <option value="+244">Angola (+244)&l
浏览 3提问于2019-04-19得票数 0
回答已采纳
10回答
我想得到一个选定选项的文本输入，并显示它在其他地方。我知道如何使用jQuery来实现它，但我想知道如何使用Vuejs来实现它。这是我的HTML
<select name="customerName"
浏览 20提问于2016-03-02得票数 47
回答已采纳
1回答
使用react-select有一个选择下拉列表，允许异步选项加载和多重选择。库的默认行为将所选选项呈现在输入本身旁边：
但我希望在选项列表中显示选定的选项，而不是在select标题中。下面是一个工作示例：
现在，我想从标题中删除/隐藏选定的选项。另外，我还想在焦点超出输入时显示占位符。
浏览 20提问于2021-02-17得票数 0
我在尝试显示包含在<mat-select>中的值列表时遇到问题。我在页面底部获得了所有选项列表，而不是将它们显示在<mat-select>的箭头旁边。
浏览 11提问于2018-09-05得票数 2
HTML选择对象，如下所示：.box { padding: 5px 2px; cursor: pointer;<select>目标是初始文本(标记为：“此文本只应在框内可见：")，将只出现在框中，而不是在下拉菜单中。在下拉菜单中，应该只显示三个选项：“选项1”、“选项2”和“选项3”。
有什么办法吗
浏览 3提问于2020-10-30得票数 0
给定以下HTML： <option value="1" selected>One</option> <option value="3">Three</option>如何获得所选选项的名称One和Two
浏览 5提问于2012-08-30得票数 2
回答已采纳
2回答
我有一个带有三个选项和三个值的选择框，这些值用于使用JS执行一些计算，因此我无法更改这些值以匹配选项文本。这是为了计算增值税的金额。我的select如下所示：<option value="20">Standard 20%</option>
<optionvalue=&q
浏览 4提问于2013-04-05得票数 0
回答已采纳
我正在动态地生成一些数据，其中包括一个旁边带有文本框的select下拉列表。如果用户单击select，我将动态填充它(下面的代码)。我在select上有一个类，我希望下面的代码可以工作。我使用select上的ID进行了测试，并将该ID放在我得到的ID上。但是，在将代码更改为引用一个类(因为将有多个数据组，其中包含一个旁边带有文本框的select )和$(this)时，我无法使其工作。谢谢
选择项<e
浏览 0提问于2008-11-14得票数 4
回答已采纳
2回答
string remainderDate: date创建了一个模型对象4>在哪里可以更改new窗体的显示文本？我打开了new.html.erb，无法理解在何处设置显示文本。
浏览 5提问于2011-04-12得票数 0
回答已采纳
我试图在输入后添加一个帮助图标，如所描述的那样。对于输入元素，它看起来很好。我试图对Select做同样的操作，但是它会扭曲Select的向下箭头，就像在中可以看到的那样 labelId="demo-simple-select-label" <MenuItem value={20}>Twent
浏览 0提问于2020-03-25得票数 1
回答已采纳
1回答
我在产品内容类型中创建了一些字段，如名为field_color (分类法术语)的颜色，但是无论我做什么，当我创建一个产品并设置field_color时，颜色名称不会出现在产品页面上。
浏览 0提问于2014-07-02得票数 0
回答已采纳
我是新的WPF，并开始遵循下面的教程。它使用错误模板显示错误，如下所示<Validation.ErrorTemplate>
我了解了如何在<
浏览 2提问于2014-09-16得票数 2
回答已采纳
我正在尝试使用Knockout获取下拉菜单的选定文本，然而，问题是value绑定返回的值是选定选项的文字value=""，它只是一个数字ID (考虑到我试图显示名称(存储在文本中)，而不是ID，这并不是很有用例如，下面是我的DOM结构：
<select data-bind="options: siteUsers, optionsText: 'UserName', options
浏览 0提问于2014-12-02得票数 0
2回答
我有一个带有西班牙语的选项下拉菜单供选择： <option selected=#)*&^ - Indio </option>它将显示一个下拉列表：
当我使用jav
浏览 6提问于2016-09-15得票数 0
1回答
我有一个多值参数' client '，在client参数中几乎有60个值，我的要求是在标题文本框中显示选定的客户端值，但当我在参数中选择'SELECT ALL‘选项时，我应该只显示' all’而不是所有的我使用下面的表达式来显示参数值，它工作正常
="For Client -" & Join(Parameters!Client.Value, ","
浏览 1提问于2014-09-23得票数 3
回答已采纳
2回答
它通过选项文本工作。我几乎接近结果，但仍然悬着。 tags: "true",
placeholder: "Selec
浏览 3提问于2017-03-23得票数 12
回答已采纳
1回答
每个选项的角度选择按钮奇怪的行为
、、、、
我有几个选项，可以删除它们。我的选项旁边的删除按钮工作得很好，删除的行为也是如此。 但是当我点击一个项目时，文本'delete‘就会出现在我选择的选项旁边。 ? 当我单击其中一个选项时的结果： ? <mat-form-field class="game-full-width" *ngIf="lotteryChoices$ | async; let options">
<mat-<em
浏览 12提问于2021-01-15得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
