如何在 Materialise 中获取下拉菜单的值答案

【问题标题】：How to get the value of dropdown in Materialize如何在 Materialise 中获取下拉菜单的值
【发布时间】：2020-03-06 00:47:34
【问题描述】：

是否可以在物化中获取选定下拉列表的值？我知道还有其他方法，例如“选择”...但我特别想使用下拉菜单 ....

这是我的代码：

.right-triangle {
    float: right;
}

.dropdown-nested {
    overflow-y: visible;
}

.dropdown-content .dropdown-content {
    margin-left: 100%;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Select one of this values</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"> 
</script>
</head>
<body>

 <div class="container">
    <div class="row">
        <div class="col s12">
            <div class="input-field">
            <input type="text" id="layout" class="autocomplet" name="miValor" id="miValor" name="camposTexto">
            <label for="layout">select a value</label>
          </div>
        </div>
    </div>

    <div class="row">
        <div class="col s12">
            <h3>Select one of this values</h3>
        </div>
    </div>

    <a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">SELECT A VALUE</a>

    <ul id='dropdown1' class='dropdown-content dropdown-nested'>
    <li><a class='dropdown-button' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">one<span class="right-triangle">&#9656;</span></a></li>
        <li><a href="#!">two</a></li>
        <li><a href="#!">three</a></li>
    </ul>

    <ul id='dropdown2' class='dropdown-content dropdown-nested'>
        <li><a href="#!">one</a></li>
        <li><a class='dropdown-button' href="#" data-activates="dropdown3" data-hover="hover" data-alignment="left">two<span class="right-triangle">&#9656;</span></a></li>
        <li><a href="#!">three</a></li>
    </ul>

    <ul id='dropdown3' class='dropdown-content'>
        <li><a href="#!">three</a></li>
        <li><a href="#!">four</a></li>
        <li><a href="#!">five</a></li>
        <li><a href="#!">six</a></li>
    </ul>
 </div>
</body>
</html>

【问题讨论】：

*.com/questions/45304257/…

标签： html css materialize

【解决方案1】：

希望对您有所帮助。

jQuery(document).ready(function() {

  jQuery('.dropdown-content li a').click(function(e) {
    console.log(jQuery(this).text());
    jQuery('.selectedvalue').html(jQuery(this).text());
     jQuery('.autocomplet').val(jQuery(this).text()).focus();
    
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col s12">
      <div class="input-field">
        <input type="text" id="layout" class="autocomplet" name="miValor" id="miValor" name="camposTexto">
        <label for="layout">select a value</label>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col s12">
      <h3>Select one of this values</h3>
    </div>
  </div>

  <a class='dropdown-button btn' href='#' data-activates='dropdown1' data-beloworigin="true">SELECT A VALUE</a>

  <ul id='dropdown1' class='dropdown-content dropdown-nested'>
    <li><a class='dropdown-button' href='#' data-activates='dropdown2' data-hover="hover" data-alignment="left">one<span class="right-triangle">&#9656;</span></a></li>
    <li><a href="#!">two</a></li>
    <li><a href="#!">three</a></li>
  </ul>

  <ul id='dropdown2' class='dropdown-content dropdown-nested'>
    <li><a href="#!">one</a></li>
    <li><a class='dropdown-button' href="#" data-activates="dropdown3" data-hover="hover" data-alignment="left">two<span class="right-triangle">&#9656;</span></a></li>
    <li><a href="#!">three</a></li>
  </ul>

  <ul id='dropdown3' class='dropdown-content'>
    <li><a href="#!">three</a></li>
    <li><a href="#!">four</a></li>
    <li><a href="#!">five</a></li>
    <li><a href="#!">six</a></li>
  </ul>
  <br>
  <div class="selectedvalue"></div>
</div>

【讨论】：

谢谢，我想要这样的东西，但是要在控制台中打印值，我怎样才能将这个相同的选定值输入到输入中以自动完成这个？？？
您希望在输入文本值中应用所选值
是的，我想用所选值自动填写此字段
现在更新检查
@sergio lopez 欢迎