Hallo
Ik heb 2 stukjes code gevonden. Eentje op http://www.hongkiat.com/blog/search-select-using-datalist/ waar uitgebreid uitgelegd wordt hoe een datalist te gebruiken voor een dropdownlijstje. En een ander stukje dient om een naam van een foto in een tekstvakje in te brengen en die foto dan te tonen na druk op een button.
Ik wil de 2 nu combineren. Dan kan ik op een mooie manier gebruik maken van de datalist en onmiddellijk een gekozen foto tonen.
Het lukt me niet om dit te doen. Iemand een tip?
Hieronder de datalistcode:
en hier de 2e code:
Ik heb 2 stukjes code gevonden. Eentje op http://www.hongkiat.com/blog/search-select-using-datalist/ waar uitgebreid uitgelegd wordt hoe een datalist te gebruiken voor een dropdownlijstje. En een ander stukje dient om een naam van een foto in een tekstvakje in te brengen en die foto dan te tonen na druk op een button.
Ik wil de 2 nu combineren. Dan kan ik op een mooie manier gebruik maken van de datalist en onmiddellijk een gekozen foto tonen.
Het lukt me niet om dit te doen. Iemand een tip?
Hieronder de datalistcode:
Code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>datalijst</title>
<style>
body {
text-align: center;
}
body,
input,
button {
font-family: palatino;
font-size: 12pt;
}
input {
width: 250px;
height: 30px;
padding: 3px;
border: 1px solid #DDE1E4;
}
select {
width: 258px;
position: relative;
left: -17px;
margin: 0;
border: 1px solid #DDE1E4;
border-top: none;
font-size:9pt;
}
datalist {
display: none;
}
option {
padding: 3px;
}
option:hover {
background-color: #11E8EA;
}
button {
width: 30px;
height: 38px;
position: relative;
left: -5px;
border: 1px solid #DDE1E4;
border-left: none;
background-color: #11E8EA;
cursor: pointer;
}
h3,
h4 {
text-align: center;
}
/* to hide datalist arrow in webkit */
input::-webkit-calendar-picker-indicator {
display: none;
}
</style>
</head>
<body>
<h3>Drop-Down</h3>
<input list=text_editors>
<button>▼</button>
<datalist id="text_editors">
<select multiple size=8>
<option value="Atom">Atom
<option value="Brackets">Brackets
<option value="Notepad ++">Notepad ++
<option value="Notepad">Notepad
<option value="Sublime Text">Sublime Text
<option value="TextEdit">TextEdit
<option value="TextMate">TextMate
<option value="Wordpad">Wordpad
</select>
</datalist>
<script>
button = document.querySelector('button');
datalist = document.querySelector('datalist');
select = document.querySelector('select');
options = select.options;
/* on arrow button click, show/hide the DDL*/
button.addEventListener('click', toggle_ddl);
function toggle_ddl() {
if (datalist.style.display === '') {
datalist.style.display = 'block';
this.textContent = "▲";
/* If input already has a value, select that option from DDL */
var val = input.value;
for (var i = 0; i < options.length; i++) {
if (options[i].text === val) {
select.selectedIndex = i;
break;
}
}
} else hide_select();
}
/* when user selects an option from DDL, write it to text field */
select.addEventListener('change', fill_input);
function fill_input() {
input.value = options[this.selectedIndex].value;
hide_select();
}
/* when user wants to type in text field, hide DDL */
input = document.querySelector('input');
input.addEventListener('focus', hide_select);
function hide_select() {
datalist.style.display = '';
button.textContent = "▼";
}
</script>
</body>
</html>
en hier de 2e code:
Code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<input type="text" value="" id="imagename" />
<input type="button" id="btn" value="GO" />
</form>
<script type="text/javascript">
document.getElementById('btn').onclick = function() {
var val = document.getElementById('imagename').value,
src = 'personeel/' + val +'.jpg',
img = document.createElement('img');
img.src = src;
document.body.appendChild(img);
}
</script>
</body>
</html>