Question

我正在尝试从下拉列表中选择一个值并传递JavaScript函数中的值。但是在JavaScript函数中我得到的值未定义。我该如何解决这个问题？这里是html

<div class="input-group-btn search-panel">
   <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
   <span id="search_concept">All</span> <span class="caret"></span>
   </button>
   <ul class="dropdown-menu" id="chooser" role="menu" onclick="dropDown_chooser()">
      <li value="type"><a href="#">Type</a></li>
      <li value="loc"><a href="#">Location</a></li>
      <li value="name"><a href="#">Name</a></li>
      <li value="sal"><a href="#">Salary</a></li>
   </ul>
</div>

和javaScript

function dropDown_chooser() {
    var select = document.getElementById("chooser");
    var select_val = select.value;
    console.log("select val" + select_val);
}

Answer 1

var dropdown = document.querySelectorAll('#chooser > li');
dropdown.forEach(function(item){
  item.addEventListener('click',function(){
    console.log(this.getAttribute('value'));
  })
})

<div class="input-group-btn search-panel">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span id="search_concept">All</span> <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" id="chooser" role="menu">
    <li value="type"><a href="#">Type</a></li>
    <li value="loc"><a href="#">Location</a></li>
    <li value="name"><a href="#">Name</a></li>
    <li value="sal"><a href="#">Salary</a></li>
  </ul>
</div>

Answer 2

如评论中所述，这不是一个下拉菜单，使用＆＃34;选择＆＃34;和＆＃34;选项＆＃34;是正确的方法，你应该使用＆＃34; onchange＆＃34;而不是＆＃34; onclick＆＃34;。我发布了它，就像这样有效，希望这有帮助！

＆＃13;

function getvalue(){
    var skillsSelect = document.getElementById("chooser");
    var selectedText = skillsSelect.options[skillsSelect.selectedIndex].text;
    console.log(selectedText);
    alert(selectedText);
    }

＆＃13;

<div class="input-group-btn search-panel">
   <select class="dropdown-menu" id="chooser" role="menu" 
       onchange="getvalue()">
      <option value="type"><a href="#">Type</option>
      <option value="loc"><a href="#">Location</option>
      <option value="name"><a href="#">Name</option>
      <option value="sal"><a href="#">Salary</option>
   </select>
</div>

＆＃13;

Answer 3

我猜你通过查看你使用过的类来使用bootstrap;你可以使用以下代码

<div class="input-group-btn search-panel">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <span id="search_concept">All</span>                      
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" id="chooser" role="menu">
        <li value="type"><a href="#">Type</a></li>
        <li value="loc"><a href="#">Location</a></li>
        <li value="name"><a href="#">Name</a></li>
        <li value="sal"><a href="#">Salary</a></li>
    </ul>
</div>

使用jQuery

$(document).ready(function(e){
    $('.search-panel .dropdown-menu').find('a').click(function(e) {
        e.preventDefault();
        var param = $(this).parent('li').attr("value");
        var concept = $(this).text();
        $('.search-panel span#search_concept').text(concept);
        console.log("select val = " + param);
   });
});

下拉列表中的选定值在javascript中返回undefined

3 个答案: