选择下拉列表不会使用视差容器显示在我的实例化网页上。
我尝试更改标题并使用其他示例。我还注意到我可能使用的是其他版本，导致我的页面无法显示。
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="../css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="../css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://d3js.org/d3.v2.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(document).ready(function () {
$('select').select();
});
</script>
<div class="container">
<div class="section">
<!-- Icon Section -->
<div class="row">
<div class="col lg12 m12 s12">
<div class="row">
<form class="col s12">
<div class="row">
<label>Materialize Select</label>
<select>
<option value="" disabled selected>Select Fruit</option>
<option value="1">Mango</option>
<option value="2">Orange</option>
<option value="3">Apple</option>
</select>
</div>
<div class="row">
<div class="col lg3 m3 s12">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
<h5 class="center">The Story of Wine</h5>
<p class="light">Find out more about the drink we all know and love. Explore
interesting
findings that the
data show us about wine.</p>
</div>
</div>
</div>
</div>
</div>
</div>
这是我尝试使用的动态下拉菜单的代码：
<script>
function change_wine_type(type, taste) {
var type = document.getElementById(type);
var taste = document.getElementById(taste);
taste.innerHTML = "";
console.log(type.value)
if (wine_type.value == "Red") {
var optionArray = ["|", "fruity_red|light, fruity", "balanced_red|medium-bodied, balanced", "full_red|full-bodied, robust", "other_red|other"];
} else if
(wine_type.value == "White") {
var optionArray = ["|", "sweet_white|sweet, juicy, soft", "balanced_white|balanced/ complex", "dry_white|dry, briny, crisp, acidic", "other_white|other"];
} else if
(wine_type.value == "Rose") {
var optionArray = ["|", "savory_rose|savory, balanced, complex", "dry_rose|dry, citris, acidic", "sweet_rose|sweet, wet, fruity, moderate acid", "other_rose|balanced/ other rose"];
} else if
(wine_type.value == "Sparkling") {
var optionArray = ["|", "dry_white|dry, crisp, briny, acidic", "sweet_white|sweet, modest, fruity", "balanced_white|balanced, complex, moderate", "other_sparkling|other"];
}
for (var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
console.log(optionArray)
newOption.value = pair[0];
newOption.innerHTML = pair[1];
taste_notes.options.add(newOption);
}
}
</script>
<div class="row">
<form class="col s12">
<div class="row">
<label>Wine Type</label>
<select id="wine_type" name="wine_type"
onchange="change_wine_type(this.id,'taste_notes')">
<option value="" disabled selected>select wine type</option>
<option value="Red">Red</option>
<option value="White">White</option>
<option value="Rose">Rose</option>
<option value="Sparkling">Sparkling</option>
</select>
</div>
<div class="row">
<label>Taste Notes</label>
<select id="taste_notes" name="taste_notes">
</select>
</div>
</div>
您在这里：
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/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>
<!-- Icon Section -->
<div class="row">
<div class="col lg12 m12 s12">
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<select>
<option value="" disabled selected>Select Fruit</option>
<option value="1">Mango</option>
<option value="2">Orange</option>
<option value="3">Apple</option>
</select>
<label>Materialize Select</label>
</div>
</div>
<div class="row">
<div class="col lg3 m3 s12">
<div class="icon-block">
<h2 class="center brown-text"><i class="material-icons">flash_on</i></h2>
<h5 class="center">The Story of Wine</h5>
<p class="light">Find out more about the drink we all know and love. Explore
interesting
findings that the
data show us about wine.
</p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<!--JavaScript at end of body for optimized loading-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('select').formSelect();
});
</script>
</body>
</html>
关于动态填充选项的第二个问题-这是一个完全正常的演示。我认为您需要注意的事项：1.查看我在哪里加载了Materialize和Jquery的CSS和javascript文件。我使用了CDN，这实际上是首选。2.您只应在填写选项后初始化将选项动态加载到的select。因此，您将看到我在for循环之后使用ID taste_notes初始化选择，如下所示：$('#taste_notes').formSelect();。如果您在动态填写选项之前执行此操作，则它将不起作用。希望这会有所帮助。
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<title>Wine example</title>
</head>
<body>
<div class="row">
<form class="col s12">
<div class="row">
<label>Wine Type</label>
<select id="wine_type" name="wine_type"
onchange="change_wine_type(this.id,'taste_notes')">
<option value="" disabled selected>select wine type</option>
<option value="Red">Red</option>
<option value="White">White</option>
<option value="Rose">Rose</option>
<option value="Sparkling">Sparkling</option>
</select>
</div>
<div class="row">
<label>Taste Notes</label>
<select id="taste_notes" name="taste_notes"></select>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('#wine_type').formSelect();
});
</script>
<script>
function change_wine_type(type, taste) {
var type = document.getElementById(type);
var taste = document.getElementById(taste);
taste.innerHTML = "";
console.log(type.value)
if (wine_type.value == "Red") {
var optionArray = ["|", "fruity_red|light, fruity", "balanced_red|medium-bodied, balanced", "full_red|full-bodied, robust", "other_red|other"];
} else if
(wine_type.value == "White") {
var optionArray = ["|", "sweet_white|sweet, juicy, soft", "balanced_white|balanced/ complex", "dry_white|dry, briny, crisp, acidic", "other_white|other"];
} else if
(wine_type.value == "Rose") {
var optionArray = ["|", "savory_rose|savory, balanced, complex", "dry_rose|dry, citris, acidic", "sweet_rose|sweet, wet, fruity, moderate acid", "other_rose|balanced/ other rose"];
} else if
(wine_type.value == "Sparkling") {
var optionArray = ["|", "dry_white|dry, crisp, briny, acidic", "sweet_white|sweet, modest, fruity", "balanced_white|balanced, complex, moderate", "other_sparkling|other"];
}
for (var option in optionArray) {
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
console.log(optionArray)
newOption.value = pair[0];
newOption.innerHTML = pair[1];
taste_notes.options.add(newOption);
}
$('#taste_notes').formSelect();
}
</script>
</body>
</html>