HTML Select，JavaScript动态加载

Question

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.

Answer 1

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 :)

Answer 2

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 -