I have the following:
<div class="form-group"> <select required name="select_search"> <option value="Titel">Titel</option> <option value="Autor">Autor</option> <option value="Datum">Datum</option> </select> </div> <div class="form-group"> <input type="text" class="form-control" id="search_query" placeholder="Suchbegriff eingeben" name="search_query"/> </div>
But what I want is the following: The input
field shouldn't be always there, I'm looking for a solution to dynamically load the "item" under the select, when one of the first two options is chosen, the textbox should appear, when you choose the 3rd entry, then a calendar should appear (Datum means date, so you should be able to choose a date in a calendar). Maybe I also have to carry about, that nothing is prechosen in the select-box, otherwise it's a bit bizarre, when theres something chosen but nothing has appeared to enter sth.
HTML Code:
<div class="form-group">
<select name="select_search" onchange="selectedValue(this)">
<option value="" >Select Option</option>
<option value="1">Titel</option>
<option value="2">Autor</option>
<option value="3">Datum</option>
</select>
</div>
<div class="form-group">
<input type="text" class="form-control" id="search_query" style="display:none;" placeholder="Suchbegriff eingeben"
name="search_query"/>
</div>
JavaScript Code:
var element = document.getElementById('search_query');
function selectedValue(_this) {
element.style.display = '';
switch (_this.value) {
case '1':
element.type = 'text';
break;
case '2':
element.type = 'text';
break;
case '3':
element.type = 'date';
break;
default:
element.style.display = 'none';
}
}
I Hope this will help you :)
you want something like this
var select = document.getElementsByTagName('select')[0];
var input = document.getElementsByTagName('input')[0];
select.addEventListener('change', function () {
var value = select.value;
if (value === 'Titel' || value === 'Autor') {
input.style.display = 'block';
} else {
input.style.display = 'none';
// do datepicker stuff
}
});
fiddle -
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.