#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    3

    Can anyone help me grab class to hide certain lists?


    Hi there. I was trying to put html select tag, Javascript so that when a user pick a value from the select box, certain lists' value of display property will be 'none' and only the lists under certain category would remain visible.

    Each of <ul> tags are assigned to class of either "handle" or "wheel" in the example below so when a user pick the value of "handle", the <ul> lists with class of "handle" will only remain visible on the page.
    I couldn't finish JS function part. I was thinking of using while loop to iterate each list. But Idk how..

    So please someone help me..


    [script]



    <scrip>
    function showCertainCategory()
    {
    var category = document.getElementById('category');

    // Idk what to do after the line above. I want products that is under certain category to remain visible.
    }
    </scrip>


    <!-- Select box -->
    <form>
    <select id="category" onchange="showCertainCategory()">
    <option value="all">All</option>
    <option value="handle">handle</option>
    <option value="wheel">wheel</option>
    </select>
    </form>


    <!--list starts here-->

    <ul class='handle'>
    <li>Handle product A</li>
    <li>handle</li>
    </ul>
    <ul class='wheel'>
    <li>Wheel product B</li>
    <li>wheel</li>
    </ul>
    <ul class='handle'>
    <li>Handle product A2</li>
    <li>handle</li>
    </ul>
    <ul class='wheel'>
    <li>Wheel product B2</li>
    <li>wheel</li>
    </ul>


    [script]
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2010
    Posts
    4
    Rep Power
    0
    I don't what you have tried, but maybe you need something like this:
    var category = document.getElementById('category');
    category.style.visibility = "hidden"/"visible"

    it will hide or show all elements with id category.
    You might wanna use some if /else to specify which one are shown/hidden. Hope it helps.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    60
    Rep Power
    3
    Dude it's still not working..


    [code]


    <script>
    function showCertainCategory()
    {
    var category = document.getElementById('category');
    var value = category.value
    if(value == 'handle')
    {
    getElementByClassName('wheel').style.display = none;
    }
    elseif(value == 'wheel')
    {
    getElementByClassName('handle').style.display = none;
    }
    }

    </script>
    <form>
    <select id="category" onchange="showCertainCategory()">
    <option value="all">All</option>
    <option value="handle">handle</option>
    <option value="wheel">wheel</option>
    </select>
    </form>

    <ul class='handle'>
    <li>Handle product A</li>
    <li>handle</li>
    </ul>
    <ul class='wheel'>
    <li>Wheel product B</li>
    <li>wheel</li>
    </ul>
    <ul class='handle'>
    <li>Handle product A2</li>
    <li>handle</li>
    </ul>
    <ul class='wheel'>
    <li>Wheel product B2</li>
    <li>wheel</li>
    </ul>




    [code]







    Originally Posted by Gemoroyshik
    I don't what you have tried, but maybe you need something like this:
    var category = document.getElementById('category');
    category.style.visibility = "hidden"/"visible"

    it will hide or show all elements with id category.
    You might wanna use some if /else to specify which one are shown/hidden. Hope it helps.

IMN logo majestic logo threadwatch logo seochat tools logo