HTML 选择，Javascript 动态加载

Question

我有以下几点：

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

但我想要的是以下内容： The inputfield 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条目，然后应该会出现一个日历（Datum 表示日期，因此您应该能够在日历中选择一个日期）。也许我还得随身携带，选择框中没有预先选择任何东西，否则有点奇怪，当有选择的东西但似乎没有任何东西进入时。

Answer 1

HTML 代码：

<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 代码：

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';
  }
}

希望对你有帮助:)

Answer 2

你想要这样的东西

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 -