从 javascript 中的 select 选项框获取值。我正在使用物化 css

Question

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

<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> 标签的位置更改为错误的顺序，则以下代码将不起作用。

<!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>

从 javascript 中的 select 选项框获取值。我正在使用物化 css

Getting the value off a select option box in javascript. I am using materialize css

materialize