Question

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

 <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，但是在我的情况下答案不起作用。有什么建议么？

Answer 1

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

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

P.S：我创建了一个有效的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"/>

C＃从下拉列表中获取价值

1 个答案: