HTML Select，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> 

但是我想要的是以下內容： input字段不應該一直存在，我正在尋找一種解決方案以動態加載select下的“ item”，當選擇了前兩個選項之一時，文本框應該出現，當您選擇第三個條目時，將出現一個日歷（“基准”表示日期，因此您應該能夠在日歷中選擇一個日期）。 也許我還必須忍受，選擇框中什么都沒有被預選，否則，當選擇了某些東西但似乎沒有東西進入時，這有點奇怪。

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

小提琴 -