The select dropdown won't show up on my materialize web page using a parallax container.
I've tried changing the heading and using different examples. I've also noticed that I may be using a different version that is preventing my page from showing up.
<!-- 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>
Here is the code for the dynamic dropdown I was trying to go for:
<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>
Here you go:
<!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>
With regards to your second question about filling in options dynamically - here is a fully working demo. The things I think you need to watch for:
1. Look at where I loaded the CSS and javascript files for Materialize and Jquery. I used the CDN's, which is actually preferred.
2. You should only initialize the select into which you load the options dynamically after you have filled in the options. Therefore, you will see I initialized the select with id taste_notes after the for loop like so: $('#taste_notes').formSelect();. If you do it before filling in the options dynamically, it will not work. Hope this helps.
<!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>
I want to implement drop-down list with multiple group selection checkbox. There are a lot of options,so I use mysql to save them. How could i get data from mysql to use as option.I want to use php to retrieve data and they must be hierarchical tree structure.
I use this sample code, but option value is directly entered. How to make it display herarchical form as image below.
This is the code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-
typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
/>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
multiselect/0.9.13/css/bootstrap-multiselect.css" />
</head>
<body>
<div class="container" style="width:400px;">
<form method="post" id="framework_form">
<div class="form-group">
<label>Select which Framework you have knowledge</label>
<select id="framework" name="framework[]" multiple class="form-control">
<option value="Codeigniter">Codeigniter</option>
<option value="CakePHP">CakePHP</option>
<option value="Laravel">Laravel</option>
<option value="YII">YII</option>
<option value="Zend">Zend</option>
<option value="Symfony">Symfony</option>
<option value="Phalcon">Phalcon</option>
<option value="Slim">Slim</option>
</select>
</div>
</form>
<br />
</div>
</body>
</html>
<script>
$(document).ready(function () {
$('#framework').multiselect({
nonSelectedText: 'Thêm khách mời',
enableFiltering: true,
enableCaseInsensitiveFiltering: true,
buttonWidth: '400px'
});
});
</script>
Sorry for my bad English and Thanks for reading.
I used .style.backgroundColor = '#58eaa1' to change the background color of the dropdown list () but it changes the appearance of the dropdown list to 3d. I want the same appearance as in 'initial appearance' even after the change of background color.
Sample code (html)
function changecolor(){
var dropdownlist = document.getElementById('dropdownlist');
dropdownlist.style.backgroundColor = 'green';
}
<!DOCTYPE html>
<html lang="en">
<script src="test.js"></script>
<body>
<div class="header">
<select id="dropdownlist" onchange="changecolor()">
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</body>
</html>
try it , i think this will solve your problem
<select style="background:#58eaa1 !important; border:1px solid #abadb3">
<option>hdd</option>
</select>
Here a working link: http://plnkr.co/edit/YbKyjIMVABcF8tZxlM3Y?p=preview
here the html:
// Code goes here
var changeBack = function (){
// select your select tag
var selectStatus = document.getElementById("selectStatus");
// get the number of the option currently selected
var optionSelected = selectStatus.selectedIndex;
// set his background-color to the class'name of the option
selectStatus.style.background = selectStatus.options[optionSelected].className;
//Then color each option in her proper class
for (var option in selectStatus.options){
selectStatus.options[option].style.background = selectStatus.options[option].className;
}
};
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<!-- Just to color the select on page load -->
<body onload="changeBack()">
<tr>
<td>
<form action="">
<select id="selectStatus" onclick="changeBack()" name="statusApproved">
<!--Set your options a class with the color you want-->
<option class="green" value="Current:Approved">Current: Approved</option>
<option class="red" value="ChangeTo:Rejected">Change to: Rejected</option>
</select>
</form>
</td>
</tr>
</body>
</html>
var buton=document.getElementById("dropdownlist");
var allchar="0123456789ABCDEF";
buton.addEventListener("change",myFun,true);
function myFun(){
var randcol= "";
for(var i=0; i<6; i++){
randcol += allchar[Math.floor(Math.random()*16)];
}
document.getElementById("dropdownlist").style.background="#"+randcol;
}
<!DOCTYPE html>
<html lang="en">
<script src="test.js"></script>
<body>
<div class="header">
<select id="dropdownlist" >
<option class="col_color">0</option>
<option class="col_color">1</option>
<option class="col_color">2</option>
<option class="col_color">3</option>
<option class="col_color">4</option>
<option class="col_color">5</option>
</select>
</div>
</body>
</html>
I'm having a problem with my java-script code. Something is wrong and i don't understand. I have the following code and i can not alert the variable.
Javascript (inside head tag)
function read(){
var city = document.getElementById("cd-dropdown").value;
alert(city);
}
And this in body tag
<section class="main">
<div class="fleft">
<p>Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script type="text/javascript">
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
} );
});
</script>
......
<div class="cont_btn">
<a onclick="read()" data-type="submit" class="btn">send</a>
</div>
I choose an option but I can't alert this option. I don't know what is the problem here.
You are close... Give the following a try. It is preferred in Jquery to actually use the .on() method. You can listen for whatever event you want and then respond to it.
$("#cd-dropdown").on("click", function() {
alert($(this).val());
});
<section class="main">
<div class="fleft">
<p><br />Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
......
<div class="cont_btn">
<a data-type="submit" class="btn">send</a>
</div>
Your code shoud work, when you click the button the checkbox is already created, try the code below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript">
function read(){
var city = document.getElementById("cd-dropdown").value;
alert(city);
}
</script>
</head>
<body>
<section class="main">
<div class="fleft">
<p>Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dropdown.js"></script>
<script type="text/javascript">
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
} );
});
</script>
<div class="cont_btn">
<a onclick="read()" data-type="submit" class="btn">send</a>
</div>
</body>
</html>
When I reproduced the error in a fiddle, it didn't work until i changed jQuery's load to No wrap - in <head>. I think your problem may be that you're loading jQuery in the body, and it's loaded after your other script, which somehow throws things off. Try moving it to your <head> tag, like this:
<head>
<script>
function read(){
var city = document.getElementById("cd-dropdown").value;
alert(city);
}
$( function() {
$( '#cd-dropdown' ).dropdown( {
gutter : 5,
stack : false,
delay : 100,
slidingIn : 100
} );
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.dropdown.js"></script>
<!-- etc -->
<title>Your Title</title>
</head>
<body>
<section class="main">
<div class="fleft">
<p></br>Choose City:</p>
</div>
<div class="fleft">
<select id="cd-dropdown" class="cd-select">
<option value="-1" selected>Choose City</option>
<option value="Nicosia" >Nicosia</option>
<option value="Larnaka" >Larnaka</option>
<option value="Limassol" >Limassol</option>
<option value="Paphos" >Paphos</option>
</select>
</div>
</section>
......
<div class="cont_btn">
<a onclick="read()" href="#" data-type="submit" class="btn">Send</a>
</div>
I have this script currently, which does everything I now want it to do. It has a drop down, you select goTo, and you can choose Wikipedia or a list of other websites. From there it will change the value of the iFrame that is currently there (Microsoft for example) to a different website (Wikipedia for example).
However my issue is that upon changing options, it closes the connection and displays a blank page until I choose Wikipedia. How can I resolve this? This is my current code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link href="style.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js" data-semver="2.0.3" data-require="jquery"></script>
<script type="text/javascript" src="http://www.appelsiini.net/projects/chained/jquery.chained.js?v=0.9.10"></script>
<script>
function goToPage763(mySelect)
{
PageIndex2=mySelect.selectedIndex;
{
if
(
mySelect.options[PageIndex2].getAttribute('href') != "none"
)
{
//this is the key code in the JavaScript to open the new page in
//the iframe:-
frames['iframe2'].location.href = mySelect.options[PageIndex2].getAttribute('href');
}
}
}
// Add your javascript here
$(function(){
$("#size").chained("#color");
});
</script>
</head>
<body>
<form name="form763">
<select class="form-control" id="color">
<option value="">choose options</option>
<option value="27">Goto</option>
<option value="26">Nothing</option>
</select>
<select class="form-control" id="size" name="select763" size="1" onchange="goToPage763(this.form.select763)">
<option value="">choose options</option>
<option value="27" class="27" href="http://www.wikipedia.com">Wiki</option>
<option value="26" class="26">Nothing</option>
</select>
</form>
<iframe name="iframe2" src="http://www.microsoft.com" align="top" height="800px" width="95%" align="middle">
</body>
</html>
See if this will solve your problem
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"
data-semver="2.0.3" data-require="jquery"></script>
<script>
function goToPage763(mySelect){
frames['iframe2'].location.href = $(mySelect).val();
}
</script>
</head>
<body>
<form name="form763">
<select class="form-control" id="size" name="select763"
size="1" onchange="goToPage763(this)">
<option value="">choose options</option>
<option value="http://www.wikipedia.com">Wiki</option>
<option value="http://www.microsoft.com">Microsoft</option>
<option value="https://www.wiktionary.org/">Wiktionary</option>
</select>
</form>
<iframe name="iframe2" src="http://www.microsoft.com" align="top"
height="800px" width="95%" align="middle">
</body>
</html>