Skip to content

Instantly share code, notes, and snippets.

@charlycoste

charlycoste/index.html

Last active December 14, 2015 18:19
Download ZIP

Revisions

  1. Charles-Edouard Coste revised this gist Mar 10, 2013. 1 changed file with 7 additions and 4 deletions.
    11 changes: 7 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,17 +10,20 @@
    function filter() {
    console.log('min='+min+' max='+max);
    $('option').each(function(){
    if ( ($(this).val()>min) && ($(this).val()<max))
    var val = parseInt($(this).val());
    if ( (min <val) && (val < max)) {
    console.log( min +' < '+val+' < '+max);
    $(this).show();
    else
    } else {
    $(this).hide();
    }
    });
    $('select').addClass('updated');
    }

    $('[name=min]').change(function(){min=$(this).val();filter()});
    $('[name=max]').change(function(){max=$(this).val();filter()});
    $('select').change(function(){$(this).removeClass('updated')});
    $('select').click(function(){$(this).removeClass('updated')});
    });
    </script>
    <style type="text/css">
    @@ -30,7 +33,7 @@
    </style>
    </head>
    <body>
    <input type="text" name="min" value="" /> &lt; x &lt; <input type="text" name="max" value="" />
    <input type="text" name="min" value="" /> &lt; x &lt; <input type="text" name="max" value="" />
    <select>
    <option value="0">0</option>
    <option value="10">10</option>
  2. Charles-Edouard Coste created this gist Mar 10, 2013.
    49 changes: 49 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://static.synap.fr/jquery.js"></script>
    <script type="text/javascript">
    $(function(){

    var min=0,max=11;

    function filter() {
    console.log('min='+min+' max='+max);
    $('option').each(function(){
    if ( ($(this).val()>min) && ($(this).val()<max))
    $(this).show();
    else
    $(this).hide();
    });
    $('select').addClass('updated');
    }

    $('[name=min]').change(function(){min=$(this).val();filter()});
    $('[name=max]').change(function(){max=$(this).val();filter()});
    $('select').change(function(){$(this).removeClass('updated')});
    });
    </script>
    <style type="text/css">
    .updated {
    border: 2px solid red;
    }
    </style>
    </head>
    <body>
    <input type="text" name="min" value="" /> &lt; x &lt; <input type="text" name="max" value="" />
    <select>
    <option value="0">0</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
    <option value="40">40</option>
    <option value="50">50</option>
    <option value="60">60</option>
    <option value="70">70</option>
    <option value="80">80</option>
    <option value="90">90</option>
    <option value="100">100</option>
    <option value="110">110</option>
    </select>
    </body>
    </html>