Question

我试图通过javascript从物化选择菜单选项中获取值并且我没有得到我想要的

<div class="input-field col s12">
    <select>
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
  </div>

例如，如何通过javascript获取选项3的值？

Answer 1

如果您使用AngularJS，则可以轻松完成。下面的代码获取，选择的选项值和显示如下。要运行materializecss select，请添加相关的jquery代码。

<script>
  $(document).ready(function() {
    $('select').material_select();
  });
</script>

<select ng-model="getValue">将所选值分配给getValue变量，您可以将其用作范围的{{getValue}}。

注意：添加<script>标记顺序很重要。如果您将<script>代码的位置更改为错误的订单，则代码将无效。

＆＃13;

<!DOCTYPE html>
<html ng-app>

<head>
  <title>Select</title>
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body class="row">

  <!-- your code start -->
  <div class="input-field col s6">
    <select ng-model="getValue">
      <option value="" disabled selected>Choose your option</option>
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
  </div>
  <!-- your code end -->
  
  <!--Display result-->
  <h5 class="col s12">You select : {{getValue}}</h5>

  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>

  <!--Materializecss Select-->
  <script>
    $(document).ready(function() {
      $('select').material_select();
    });
  </script>

  <!--AngularJS CDN-->
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</body>

</html>

＆＃13;

从javascript中的选择选项框中获取值。我正在使用materialize css

1 个答案: