从javascript中的选择选项框中获取值.我正在使用物化CSS

问题描述：

我试图通过javascript从实现选择菜单选项中获取价值，而我没有得到我想要的东西

Im trying to grab the value off the materialize select menu option via javascript and im not getting what I want

<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的值?

For instance how would I get the value of option 3 via javascript?

答

如果您使用AngularJS，则可以轻松完成.以下代码get，option的选定值并显示在下面.要运行materializecss select，应添加相关的jquery代码.

If you use AngularJS this can done easily. Following code get , selected value of option and display below. To run materializecss select should add relevant jquery code.

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

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

<select ng-model="getValue"> assign selected value to getValue variable and you can use it as {{getValue}} withing the scope.

注意:添加<script>标签时，顺序很重要.如果将<script>标记的位置更改为错误的顺序，则以下代码将不起作用.

Note: When you add <script> tag order is important. If you change the position of <script> tags to wrong order following code will not work.

<!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中的选择选项框中获取值.我正在使用物化CSS

相关推荐