从javascript中的选择选项框中获取值.我正在使用物化CSS [英] Getting the value off a select option box in javascript. I am using materialize 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
