javascript - 从 html 菜单中读取值？

Question

如何读取此菜单的选定值，就好像它是一个下拉列表一样？

对于像下面这样的常规下拉列表，我使用类似这样的方法来读取值:

<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。

我没有提到的是，读取值的代码将放在已存在的按钮的单击事件中。之前没提是因为不知道点击事件会用来读取值。

Answer 1

您可以使用 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>