Я не могу получить выпадающий список, чтобы работать на моей странице

Я не могу получить выпадающий список для работы на моей странице

Ну вот:

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;!--Import Google Icon Font--{amp}gt; {amp}lt;link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet"{amp}gt; {amp}lt;!--Import materialize.css--{amp}gt; {amp}lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"{amp}gt; {amp}lt;!--Let browser know website is optimized for mobile--{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;!-- Icon Section --{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col lg12 m12 s12"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;form class="col s12"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="input-field col s12"{amp}gt; {amp}lt;select{amp}gt; {amp}lt;option value="" disabled selected{amp}gt;Select Fruit{amp}lt;/option{amp}gt; {amp}lt;option value="1"{amp}gt;Mango{amp}lt;/option{amp}gt; {amp}lt;option value="2"{amp}gt;Orange{amp}lt;/option{amp}gt; {amp}lt;option value="3"{amp}gt;Apple{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;label{amp}gt;Materialize Select{amp}lt;/label{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col lg3 m3 s12"{amp}gt; {amp}lt;div class="icon-block"{amp}gt; {amp}lt;h2 class="center brown-text"{amp}gt;{amp}lt;i class="material-icons"{amp}gt;flash_on{amp}lt;/i{amp}gt;{amp}lt;/h2{amp}gt; {amp}lt;h5 class="center"{amp}gt;The Story of Wine{amp}lt;/h5{amp}gt; {amp}lt;p class="light"{amp}gt;Find out more about the drink we all know and love. Explore interesting findings that the data show us about wine. {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;!--JavaScript at end of body for optimized loading--{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; $(document).ready(function(){ $('select').formSelect(); }); {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Что касается вашего второго вопроса о динамическом заполнении опций — вот полностью рабочая демонстрация. Вещи, на которые, я думаю, нужно обратить внимание: 1. Посмотрите, куда я загрузил файлы CSS и javascript для Materialise и Jquery. Я использовал CDN, что на самом деле предпочтительнее. 2. Вы должны инициализировать select в который вы загружаете параметры динамически после того, как вы заполнили параметры. Поэтому вы увидите, что я инициализировал select с идентификатором taste_notes после цикла for следующим образом: $('#taste_notes').formSelect(); , Если вы сделаете это до динамического заполнения параметров, это не сработает. Надеюсь это поможет.

 {amp}lt;!doctype html{amp}gt; {amp}lt;html lang="en"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;!-- Required meta tags --{amp}gt; {amp}lt;meta charset="utf-8"{amp}gt; {amp}lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"{amp}gt; {amp}lt;!--Import Google Icon Font--{amp}gt; {amp}lt;link href="https://fonts.googleapis.com/icon?family=Material Icons" rel="stylesheet"{amp}gt; {amp}lt;!--Import materialize.css--{amp}gt; {amp}lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"{amp}gt; {amp}lt;title{amp}gt;Wine example{amp}lt;/title{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;form class="col s12"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;label{amp}gt;Wine Type{amp}lt;/label{amp}gt; {amp}lt;select id="wine_type" name="wine_type" onchange="change_wine_type(this.id,'taste_notes')"{amp}gt; {amp}lt;option value="" disabled selected{amp}gt;select wine type{amp}lt;/option{amp}gt; {amp}lt;option value="Red"{amp}gt;Red{amp}lt;/option{amp}gt; {amp}lt;option value="White"{amp}gt;White{amp}lt;/option{amp}gt; {amp}lt;option value="Rose"{amp}gt;Rose{amp}lt;/option{amp}gt; {amp}lt;option value="Sparkling"{amp}gt;Sparkling{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;label{amp}gt;Taste Notes{amp}lt;/label{amp}gt; {amp}lt;select id="taste_notes" name="taste_notes"{amp}gt;{amp}lt;/select{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; $(document).ready(function(){ $('#wine_type').formSelect(); }); {amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; 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(); } {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector