如何僅在HTML中選擇過濾器時顯示一些輸入文本？

Question

我有這樣的HTML：

<div class="search"> 
    <input type="text" id="search_text" name="search_text" placeholder="Search by Name ..."> 
    <select> 
     <option>Filter</option> 
     <option>By date</option> 
     <option>By size</option> 
    </select> 
    From: <input type="date" id="start_date" name="start_date"> 
    To: <input type="date" id="end_date" name="end_date"> 
    Size:<input type="text" id="size" name="size" placeholder="size"> 
    <input type="submit" onclick="return search()" value="Search"> 
</div> 

我想告訴From:，只有當By date在過濾器選擇，我想展示"Size"只有當By size在過濾器選擇To:。

Answer 1

好的，我做了一個例外，併爲你做了編碼！

這裏是一個jQuery的解決方案：

工作例如：http://jsfiddle.net/khRjq/

<div class="search"> 
    <input type="text" id="search_text" name="search_text" placeholder="Search by Name ..."> 
    <select id="selectmode"> 
    <option value="">Filter...</option> 
    <option value="date">By date</option> 
    <option value="size">By size</option> 
    </select> 
    <div class="bydateinputs" style="display: none"> 
     From: <input type="date" id="start_date" name="start_date"> 
     To: <input type="date" id="end_date" name="end_date"> 
    </div> 
    <div class="bysizeinputs" style="display: none"> 
     Size:<input type="text" id="size" name="size" placeholder="size"> 
    </div> 
    <input type="submit" onclick="return search()" value="Search"> 
    </div> 

JS：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script> 
$(function(){ 
    $('#selectmode').change(function() 
    { 
     if ($(this).val() == 'date') 
     { 
      $('.bydateinputs').show(); 
      $('.bysizeinputs').hide(); 
     } 
     if ($(this).val() == 'size') 
     { 
      $('.bydateinputs').hide(); 
      $('.bysizeinputs').show(); 
     } 
    }); 
}); 
</script> 

Answer 2

首先，把它們放在一個DIV。

篩選 按日期 按大小 來源： 要： 尺寸：

然後使用jQuery來處理選擇更改事件

$("select").change(function() { 
    if($(this).text == "By date") 
    { 
     $("div.size").hide(); 
     $("div.from").show(); 
     $("div.to").show(); 
    } 
    else if($(this).text == "By size") 
    { 
     $("div.size").show(); 
     $("div.from").hide(); 
     $("div.to").hide(); 
    } 
    else 
    { 
     $("div.size").hide(); 
     $("div.from").hide(); 
     $("div.to").hide(); 
    } 
}); 

Answer 3

如果你不想包括jQuery，你可以按照this fiddle：

HTML：

<div class="search" id="searchDiv"> 
    <input type="text" id="search_text" name="search_text" placeholder="Search by Name ..."/> 
    <select onchange="changeSearchType(this)"> 
     <option value="">Filter</option> 
     <option value="dateinput">By date</option> 
     <option value="sizeinput">By size</option> 
    </select> 
    <div id="dateinput" style="display:none;"> 
     From: <input type="date" id="start_date" name="start_date"/> 
     To: <input type="date" id="end_date" name="end_date"/> 
    </div> 
    <div id="sizeinput" style="display:none;"> 
     Size:<input type="text" id="size" name="size" placeholder="size"/> 
    </div> 
    <input type="submit" onclick="return search()" value="Search"> 
</div> 

的JavaScript：

function changeSearchType(el){ 
    var e = el.value, 
     divs = document.getElementById("searchDiv").getElementsByTagName('div'); 
    for(var i = 0, l = divs.length; i < l ; i++){ 
     divs[i].style.display = 'none'; 
    } 
    if(e != '') document.getElementById(e).style.display = 'block'; 
}