SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Drop Down List - on change

    I have the following script that I picked up which loads the days of the week into a drop down list. Depending on the day picked, it shows times. Script is as follows:

    Code:
    function getElementsByClass(searchClass,node,tag) {
        var classElements = new Array();
        if (node == null) node = document;
        if (tag == null) tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
        for (i = 0, j = 0; i < elsLen; i++) {
            if ( pattern.test(els[i].className) ) {
                classElements[j] = els[i];
                j++;
            }
        }
        return classElements;
    }
    
    var hsInputs;
    
    function resetInputs() {
        for (x in hsInputs) {
            hsInputs[x].style.display = "none";
        }
    }
    
    function setHsInputs() {
        hsInputs = getElementsByClass("hsInput");
        resetInputs();
    }
    
    function hsOptions(input) {
        resetInputs();
        if (input.value) {
            hsInputs[input.selectedIndex-1].style.display = "block";
        }
    }
    It shows/hides content based off a class name of "timeInput" as shown below:

    <p class="timeInput">Monday Timesbr/>
    <input type="radio" name="times" value="9am">
    9am<br />

    What I was wondering, is there a way to modify this script so that I can show/hide a table row based off just one value from the drop down list?

    Test file is at: http://midwestwebdesign.net/test.html

    Any suggestions would be appreciated.
    Ryan Butler

    Midwest Web Design

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I figured out that I need to do something like this on my last function:

    Code:
    function hsOptions(input) {
        resetInputs();
       if (input.value == "other") {
            hsInputs[0].style.display = "block";
        }
    }
    However, when I do this, both the follow up question and the corresponding drop down list are present in the first column cell. Would there be a reason for this?
    Ryan Butler

    Midwest Web Design

  3. #3
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now I know why...Mozilla follows the DOM, where you need to use display set to table-row...whereas IE needs display set to block. If I can figure out how to do that and figure out why my drop down list isn't resetting...I'd be good.

    Any JS gurus come along and can spot something...please clue me in.
    Ryan Butler

    Midwest Web Design

  4. #4
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would post this on the accessibility board. I think onchange is one of the accessibility non-nos. You can probably get some advice there for a different approach. Beyond that I rarely use tables, and that may be one reason you haven't gotten a lot of response. Good luck!
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •