从html菜单中读取值？
从html菜单中读取值？
提问于 2018-06-19 01:47:26
如何读取此菜单的选定值，就像它是一个下拉列表一样？
对于如下所示的常规下拉列表，我使用类似下面的内容来读取值：
<select id="ddl">
<option value="In" selected="selected">In</option>
<option value="Out">Out</option>
<option value="Ratio">Ratio</option>
</select> 使用javascript，我读取了选定的值：
var dropdown = document.getElementById("ddl");
var InOrOut = dropdown.options[dropdown.selectedIndex].value;是否可以使用类似这样的内容来读取以下菜单的选定值：
function FillAll()
{
alert('I will read value');
// This is where menu value is read.
alert('Value read is');
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
#wrapper {
width: 100%;
border: 1px solid black;
overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
width: 400px;
float:left; /* add this */
border: 1px solid red;
}
#second {
border: 1px solid green;
text-align: right;
overflow: hidden; /* if you don't want #second to wrap below #first */
}
.bs-example{
margin: 20px;
}
.text
{
font-size: 15pt;
font-family: Helvetica;
color: #3d718b;
}
hr{
margin: 60px 0;
}
</style><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="float:left;">
<ul class="nav nav-pills">
<li class="text" class="dropdown">
<a href="#" data-toggle="dropdown" >Menu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="">Value1</a></li>
<li><a href="">Value2</a></li>
<li><a href="">Value3</a></li>
</ul>
</li>
</li>
</ul>
</div>
<button id="ButtonSearch" onclick="FillAll()">GO</button>
由于人们不能做太多改变常规下拉列表的设计，我在考虑使用另一种方法，使用html菜单而不是ddl。
我没有提到的是，读取值的代码将放在已经存在的按钮的click事件中。我之前没有提到它，因为我不知道click事件会被用来读取值。
回答 2
Stack Overflow用户
发布于 2018-06-19 01:57:20
您可以使用getAttribute从每个li中提取一个value
$('.dropdown-menu li').click( e => {
console.log(e.target.getAttribute('value'));
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style type="text/css">
#wrapper {
width: 100%;
border: 1px solid black;
overflow: hidden; /* will contain if #first is longer than #second */
}
#first {
width: 400px;
float:left; /* add this */
border: 1px solid red;
}
#second {
border: 1px solid green;
text-align: right;
overflow: hidden; /* if you don't want #second to wrap below #first */
}
.bs-example{
margin: 20px;
}
.text
{
font-size: 15pt;
font-family: Helvetica;
color: #3d718b;
}
hr{
margin: 60px 0;
}
</style><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div style="float:left;">
<ul class="nav nav-pills">
<li class="text" class="dropdown">
<a href="#" data-toggle="dropdown" >Menu <b class="caret"></b></a>
<ul class="dropdown-menu">
<li value="1">Value1</li>
<li value="2">Value2</li>
<li value="3">Value3</li>
</ul>
</li>
</li>
</ul>
</div>
Stack Overflow用户
发布于 2018-06-19 02:02:37
这看起来可以使用jQuery或原生JS来完成您所需的工作。
<script>
// with jquery
$('.dropdown-menu li').click(function(el) {
console.log(el.target.textContent)
})
// native
const list = document.querySelectorAll('.dropdown-menu li');
list.forEach(el => el.addEventListener('click', function listClick() {
console.log(el.textContent);
}));
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50914918
复制相关文章
相似问题
腾讯云开发者
