时间戳

首页 > 解决方案 > C# 从下拉列表中获取值

javascript - C# 从下拉列表中获取值

问题描述

我正在尝试在下拉菜单中获取所选可能性的值。如果选择“生产”，我想获得值 =“产品”。但我不会工作。

 <div class="btn dropdown-toggle col-sm-2" type="button" id="menu1" data- 
toggle="dropdown" style="font-size: 10px;">
                            Alle
<span class="caret" style="text-align:center"></span>
       </div>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation"><a value="all" role="menuitem" tabindex="-1" 
href="#">All</a></li>
<li role="presentation"><a value="prod" role="menuitem" tabindex="-1" 
href="#">Production</a></li>
<li role="presentation"><a value="hour" role="menuitem" tabindex="-1" 
href="#">Hour</a></li>
<li role="presentation"><a value="adhoc" role="menuitem" tabindex="-1" 
href="#">Adhoc</a></li>
                        </ul>

我一直在尝试使用： var e = document.getElementById("menu1"); ，但我只能用 var type = e.innerText.toString(); 获得 innerText =“Production”，但无法获得值....

我知道存在一个类似的问题：Get value from Dropdown，但答案在我的情况下不起作用。有什么建议么 ？

标签： javascripthtmldrop-down-menu

解决方案

获取内部文本并找到a带有它的元素，然后您可以获得值

var e = document.getElementById("menu1");
var element = $( "#menu1 a:contains('"+ e.innerText.toString() +"')" );
var value = element.attr('value');

PS：我创建了一个有效的 Bootstrap 3 下拉实现的演示。您可以看到在更改下拉值时它会打印 value 属性

$('.dropdown-menu').on( 'click', 'a', function() {
    var text = $(this).html();
    console.log('Value changed to ', $(this).attr('value'));
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});
                        
                        <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
  <li role="presentation"><a value="all" role="menuitem" tabindex="-1" 
  href="#">All</a></li>
  <li role="presentation"><a value="prod" role="menuitem" tabindex="-1" 
  href="#">Production</a></li>
  <li role="presentation"><a value="hour" role="menuitem" tabindex="-1" 
  href="#">Hour</a></li>
  <li role="presentation"><a value="adhoc" role="menuitem" tabindex="-1" 
  href="#">Adhoc</a></li>
</ul>
</div>


<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>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

推荐阅读