0

我有一个这样的 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。

4

3 回答 3

0

好的，我破例为你编码！

这是一个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>
于 2013-04-29T08:39:18.507 回答
0

首先，将它们放入一个 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();
   }   
});
于 2013-04-29T08:43:59.383 回答
0

如果你不想包含 jQuery，你可以按照这个小提琴：

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';
}
于 2013-04-29T08:53:31.380 回答