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

OK、私は例外を作成し、コーディングを行いました!

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

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 に答える