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:时显示To:和By date，并且我只想在过滤器中选择"Size"时显示By size

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

如何在HTML中选择过滤器时显示一些输入文本？

3 个答案: