如何读取此菜单的选定值，就好像它是下拉列表一样？
对于下面的常规下拉列表，我使用类似的东西来读取值：
<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事件来读取值。
答案 0 :(得分：0)
您可以使用getAttribute从每个value中删除li：
$('.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>
答案 1 :(得分：0)
这看起来可以使用jQuery或本机JS来完成所需的工作。
documentEl.on('scroll', function() {
if (documentEl.scrollTop() > activateElOffset) {
activateEl.each(function(){
$(this).css("width", $(this).data("percent"));
});
}
});
答案 2 :(得分：0)
简短的回答是，是的。以下代码（根据您的示例）使用事件处理程序，该处理程序在单击其中一个菜单项时触发。我还在下面列出了一个有效的jsfiddle示例。
<强> HTML
<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="javascript:void(0);">Value 1</a></li>
<li><a href="javascript:void(0);">Value 2</a></li>
<li><a href="javascript:void(0);">Value 3</a></li>
</ul>
</li>
</ul>
<div class="col-xs-12 text-danger" id="result"></div>
Javascript / jQuery
$(document).on('click', '.dropdown-menu li a', function() {
var r = $('#result');
r.empty().append('You have clicked <strong>'+$(this).text()+'</strong> in the drop-down menu.');
});
https://jsfiddle.net/Xonos/z9jfa86r/
更新：我添加了另一个答案，其中显示了一个辅助示例，您可以在其中选择/取消选择菜单项，然后单击按钮以确定选择了哪个菜单项。 JSFiddle链接如下。
<强> HTML
<div class="col-xs-12">
<ul class="nav nav-pills">
<li class="text" class="dropdown">
<a href="#" data-toggle="dropdown" >Menu <b class="caret"></b></a>
<ul id="myDropdown" class="dropdown-menu">
<li><a href="javascript:void(0);">Value 1</a></li>
<li><a href="javascript:void(0);">Value 2</a></li>
<li><a href="javascript:void(0);">Value 3</a></li>
</ul>
</li>
</ul>
</div>
<div class="col-xs-12 text-red" id="result"> </div>
<br>
<div class="col-xs-12">
<button id="checkBtn" class="btn btn-sm btn-success pull-right">Check Selected Menu Item</button>
</div>
<div class="col-xs-12 text-orange" id="check"> </div>
<强> CSS
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 5px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
}
.text-red {
color:rgb(206, 35, 35);
}
.text-orange {
color:rgb(252, 144, 0);
}
.nav {
background-color:rgba(255,255,255,0.15);
}
.selected-item {
background-color:rgb(255,0,0);
}
Javascript / jQuery
$(document).on('click', '#myDropdown li a', function() {
var r = $('#result');
$(this).parent().parent().children().removeClass('selected-item');
if($(this).hasClass('selected-item')) {
$(this).removeClass('selected-item'); //De-select menu item.
} else {
$(this).parent().addClass('selected-item'); //Select menu item.
}
r.empty().append('You have selected <strong>'+$(this).text()+'</strong> in the drop-down menu.');
});
$(document).on('click', '#checkBtn', function() {
var selected = $('#myDropdown .selected-item');
if(selected.length > 0) { //If any of the menu items <li> have the "selected-item" class added.
$('#check').empty().append('Found a selected menu item. The value of it is: <strong>'+selected.text()+'</strong>');
} else {
$('#check').empty().append('You have not selected an item from the menu.');
}
});