Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

hide/show select box question

Status
Not open for further replies.
jj0914

jj0914

Programmer
Aug 4, 2006
33
0
0
CA
I am trying to add hide/show select boxes on my page. The way it should work is that when I select a category, associated sub-category select box will show up, otherwise no sub-category select box is shown. my trouble is that I can't get sub-category select box show up when i select proper category. Can anyone give me a hand on this. below is the my code:

<script type="text/javascript" src="[% c.uri_for("/static/js/effects.js") %]"></script>
<script type="text/javascript" src="[% c.uri_for("/static/js/controls.js") %]"></script>

<script type="text/javascript">
function parentChosen (parenty) {
parent = $(parent);
var children = document.getElementsByClassName('child');
for (i = 0; i < children.length; i++) {
Element.hide(children);
children.getElementsByTagName("select")[0].disabled = true;
}

var child = $("parent_"+parent.value+"top_children(3)")
if (child) {
child.show();
childChosen(child);
child.getElementsByTagName("select")[0].disabled = false;
}

else {
childChosen(null);
}
}

function childChosen (child) {
child = $(child);
}

Event.observe( window, 'load',
function () {
Event.observe( 'parent', 'click', function () { parentChosen('parent'); } );
Event.observe( 'parent', 'keypress', function () { parentChosen('parent'); } );
parentChosen( 'parent' );
}
);
</script>

......

<div class="parent" style="">
<label for="parent">[% loc('Category') %] :</label>
<select name="parent" id="parent">
<option value=""></option>
[% FOREACH cat IN categories %]
<option value="[% cat.category_id %]">[% cat.title %]</option>
[% END %]
</select>
</div>

[%-CALL categories.reset; %]
[% FOREACH category IN categories -%]
[% children = category.top_children( 3 ) %]
[% IF children %]
<div class="child" style="display;" id="children"><br>
<label for="child">
[% loc( 'Sub-category' ) %] :
</label>
<select name="child">
<option value=""></option>
[% FOREACH child IN children %]
<option value="[% child.get_column( 'id' ) %]">[% child.title %]</option>
[% END %]
</select>
</div>
[% END %]
[%- END %]
 
Sort by date Sort by votes
And looking at your server-side code, it implies you have a loop around the secondselect box, which has an ID... this could mean you have multiple elements with the same ID which is clearly not valid.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
yes I do have multiple sub-category select box, here is my whole code:
Code: 
[% WRAPPER wrapper.tt %]
[%- PROCESS macros.tt -%]
<script type="text/javascript" src="[% c.uri_for("/static/js/effects.js") %]"></script>
<script type="text/javascript" src="[% c.uri_for("/static/js/controls.js") %]"></script>

<script type="text/javascript">
function parentChosen (parenty) {
    parent = $(parent);
    var children = document.getElementsByClassName('child');
    for (i = 0; i < children.length; i++) {
        Element.hide(children[i]);
        children[i].getElementsByTagName("select")[0].disabled = true;
    }
    var child = ?
    if (child) {
        child.show();
        childChosen(child);
        child.getElementsByTagName("select")[0].disabled = false;
    }

    else {
        childChosen(null);
    }
}

function childChosen (child) {
        child = $(child);
}

Event.observe( window, 'load',
    function () {
        Event.observe( 'parent', 'click',  function () { parentChosen('parent'); } );
        Event.observe( 'parent', 'keypress',  function () { parentChosen('parent'); } );
        parentChosen( 'parent' );
    }
);
</script>

<h2>Create New Links</h2>
<form method="post" action="[% c.uri_for( "/admin/link/create" ) %]">
<fieldset>
    <legend>Link Information</legend>
<label for="title">
    [% loc('Title:'); form_messages('title') %]
    <input type="text" name="title" id="title" class="text"/>
</label>
<label for="lang">
    [% loc('Language:'); form_messages('lang') %]
    <input type="text" name="lang" id="lang" class="text"/>
</label>
<label for="url">
    [% loc('URL:'); form_messages('url') %]
    <input type="text" name="url" id="url" class="text"/>
</label>
<label for="home_title">
    [% loc('Homepage Title:'); form_messages('home_title') %]
    <input type="text" name="home_title" id="home_title" class="text"/>
</label>
<label for="homeurl">
    [% loc('Homepage URL:'); form_messages('home_url') %]
    <input type="text" name="home_url" id="home_url" class="text"/>
</label>
<label for="description">
    [% loc('Description:'); form_messages('description') %]
    <textarea name="description" id="description" rows="8"></textarea>
</label>

<div class="parent" style="">
    <label for="parent">[% loc('Category') %]  :</label>
    <select name="parent" id="parent">
        <option value=""></option>
        [% FOREACH cat IN categories %]
            <option value="[% cat.category_id %]">[% cat.title %]</option>
        [% END %]
    </select>
</div>

[%-CALL categories.reset; %]
[% FOREACH category IN categories -%]
[% children = category.top_children( 3 ) %]
[% IF children %]
    <div class="child" style="display;" id="parent_[% category.category_id %]_children"><br>
        <label for="child">
            [% loc( 'Sub-category' ) %]  :
        </label>
        <select name="child">
            <option value=""></option>
            [% FOREACH child IN children %]
                <option value="[% child.get_column( 'id' ) %]">[% child.title %]</option>
            [% END %]
        </select>
    </div>
[% END %]
[%- END %]

</fieldset>

<div class="buttons">
    <input type="submit" value="[% loc('OK') %]" id="ok"/>
    <a href="[% c.session.url %]"><input type="submit" name="cancel" value="[% loc('Cancel') %]"/></a>
[%- IF updating %]
    <input type="submit" name="delete" value="[% loc('Delete') %]"/>
[%- END %]
</div>
</form>
[% END %]

I am not sure what I should assign to child variable, i've tried many ways, none of them worked.
 
Upvote 0 Downvote
sorry about that, here is the client-side code:
Code: 
<script type="text/javascript" src="[URL unfurl="true"]http://unbstudent:3000/static/js/effects.js"></script>[/URL]
<script type="text/javascript" src="[URL unfurl="true"]http://unbstudent:3000/static/js/controls.js"></script>[/URL]

<script type="text/javascript">
function parentChosen (parenty) {
    parent = $(parent);
    var children = document.getElementsByClassName('child');
    for (i = 0; i < children.length; i++) {
        Element.hide(children[i]);
        children[i].getElementsByTagName("select")[0].disabled = true;
    }

    var child = $("parent_"+parent.value+"_children")
    if (child) {
        child.show();
        childChosen(child);
        child.getElementsByTagName("select")[0].disabled = false;
    }

    else {
        childChosen(null);
    }
}

function childChosen (child) {
        child = $(child);
}

Event.observe( window, 'load',
    function () {
        Event.observe( 'parent', 'click',  function () { parentChosen('parent'); } );
        Event.observe( 'parent', 'keypress',  function () { parentChosen('parent'); } );
        parentChosen( 'parent' );
    }
);
</script>

<h2>Create New Links</h2>
<form method="post" action="[URL unfurl="true"]http://unbstudent:3000/admin/link/create">[/URL]
<fieldset>
    <legend>Link Information</legend>

<label for="title">
    Title:
    <input name="title" class="text" id="title" type="text" />
</label>
<label for="lang">
    Language:
    <input name="lang" class="text" id="lang" type="text" />
</label>
<label for="url">
    URL:
    <input name="url" class="text" id="url" type="text" />
</label>
<label for="home_title">
    Homepage Title:
    <input name="home_title" class="text" id="home_title" type="text" />

</label>
<label for="homeurl">
    Homepage URL:
    <input name="home_url" class="text" id="home_url" type="text" />
</label>
<label for="description">
    Description:
    <textarea name="description" id="description" rows="8"></textarea>
</label>

<div class="parent" style="">
    <label for="parent">Category  :</label>

    <select name="parent" id="parent">
        <option value=""></option>
        
            <option value="192">Accessibility</option>
        
            <option value="20">Digital Texts</option>
        
            <option value="2">Educational Resources</option>
        
            <option value="57">First Nations</option>
        
            <option value="32">News Media</option>

        
            <option value="34">Resources</option>
        
            <option value="85">Resources For Facilitators</option>
        
            <option value="36">Resources on Plain Language</option>
        
            <option value="41">Software</option>
        
            <option value="86">Tools (School-To-Work)</option>
        
    </select>

</div>





    <div class="child" style="display;" id="parent_2_children"><br>
        <label for="child">
            Sub-category  :
        </label>
        <select name="child">
            <option value=""></option>

            
                <option value="1">Adult Education</option>
            
                <option value="16">Dictionaries and Reference</option>
            
                <option value="44">Disabilities</option>
            
                <option value="18">Distance Education</option>
            
                <option value="7">Electronic Communication</option>
            
                <option value="13">Employment Readiness</option>

            
                <option value="19">English as a Second Language (ESL)</option>
            
                <option value="12">Family Literacy </option>
            
                <option value="3">General Educational Resources</option>
            
                <option value="195">Health</option>
            
                <option value="77">Justice and Corrections</option>
            
                <option value="27">Libraries </option>

            
                <option value="28">Museums </option>
            
                <option value="37">Plain/Clear Language </option>
            
                <option value="38">Professional Development</option>
            
                <option value="17">Research Tools</option>
            
                <option value="40">Software</option>
            
                <option value="15">Special Education</option>

            
                <option value="6">Subject Areas</option>
            
                <option value="39">Workplace Literacy</option>
            
        </select>
    </div>



    <div class="child" style="display;" id="parent_32_children"><br>
        <label for="child">

            Sub-category  :
        </label>
        <select name="child">
            <option value=""></option>
            
                <option value="31">Interesting Media</option>
            
        </select>
    </div>


    <div class="child" style="display;" id="parent_34_children"><br>

        <label for="child">
            Sub-category  :
        </label>
        <select name="child">
            <option value=""></option>
            
                <option value="33">Clear Language and Design (CLAD)</option>
            
                <option value="150">Plain Language Resources</option>
            
        </select>

    </div>



    <div class="child" style="display;" id="parent_36_children"><br>
        <label for="child">
            Sub-category  :
        </label>
        <select name="child">
            <option value=""></option>
            
                <option value="151">General Writing</option>

            
                <option value="35">Style</option>
            
        </select>
    </div>




</fieldset>

I was trying to assign different value to child variable, you might see one of it up there.
 
Upvote 0 Downvote
There are several things wrong that i can see:

- You haven't addressed the erroneous "display" style I pointed out in my first post.

- You are using the reserved keyword "parent" for both variable names and IDs. You should rename this.

- You are using "onclick" and "onkeypress" events on the parent select element. You should remove both of these and use "onchange" instead.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
According to your suggestions, i have made these changes:
Code: 
<script type="text/javascript">
function parentChosen (parenty) {
    parent = $(parent);
    var children = document.getElementsByClassName('child');
    for (i = 0; i < children.length; i++) {
        Element.hide(children[i]);
        children[i].getElementsByTagName("select")[0].disabled = true;
    }

    var child = $("parent_"+parent.value+"_children")
    if (child) {
        child.show();
        childChosen(child);
        child.getElementsByTagName("select")[0].disabled = false;
    }

    else {
        childChosen(null);
    }
}

function childChosen (child) {
        child = $(child);
}

Event.observe( window, 'load',
    function () {
        Event.observe( 'parent', 'change',  function () { parentChosen('parent'); } );
        parentChosen( 'parent' );
    }
);
</script>

<div class="parent_cat">
    <label for="parent_cat">[% loc('Category') %]  :</label>
    <select name="parent_cat" id="parent_cat">
        <option value=""></option>
        [% FOREACH cat IN categories %]
            <option value="[% cat.category_id %]">[% cat.title %]</option>
        [% END %]
    </select>
</div>

[%-CALL categories.reset; %]
[% FOREACH category IN categories -%]
[% children = category.children %]
[% IF children %]
    <div class="child_cat" id="parent_[% category.category_id %]_children"><br>
        <label for="child_cat">
            [% loc( 'Sub-category' ) %]  :
        </label>
        <select name="child_cat">
            <option value=""></option>
            [% FOREACH child IN children %]
                <option value="[% child.category_id %]">[% child.title %]</option>
            [% END %]
        </select>
    </div>
[% END %]
[%- END %]

 
Upvote 0 Downvote
Nooo - you are STILL using the variable name "parent". Perhaps you should read and absorb the contents of all posts before continuing. I hate having to repeat myself.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
you are right, i should look closely, it is working now. thank you Dan.
 
Upvote 0 Downvote
Dan, I am trying to get sub-category of the child to work, but no luck, i am not sure if i am on a right track, would you mind to have a look
Code: 
<script type="text/javascript" src="[URL unfurl="true"]http://unbstudent:3000/static/js/effects.js"></script>[/URL]
<script type="text/javascript" src="[URL unfurl="true"]http://unbstudent:3000/static/js/controls.js"></script>[/URL]

<script type="text/javascript">
function parentChosen (parent_cat) {
    parent_cat = $(parent_cat);
    var children = document.getElementsByClassName('child_cat');
    for (i = 0; i < children.length; i++) {
        Element.hide(children[i]);
        children[i].getElementsByTagName("select")[0].disabled = true;
    }

    var child = $("parent_"+parent_cat.value+"_children");
    if (child) {
        child.show();
        childChosen(child);
        child.getElementsByTagName("select")[0].disabled = false;
    }

    else {
        childChosen(null);
    }
}

function childChosen(child) {
    child = $(child);
}

function subparentChosen (child_cat) {
    child_cat = $(child_cat);
    var children = document.getElementsByClassName('next_child_cat');
    for (i = 0; i < children.length; i++) {
        Element.hide(children[i]);
        children[i].getElementsByTagName("select")[0].disabled = true;
    }

    var child = $("parent_"+child_cat.value+"_children");
    if (child) {
        child.show();
        childChosen(child);
        child.getElementsByTagName("select")[0].disabled = false;
    }

    else {
        nextchildChosen(null);
    }
}

function nextchildChosen(next_child_cat) {
    next_child_cat = $(next_child_cat);
}

Event.observe( window, 'load',
    function () {
        Event.observe( 'parent_cat', 'change',  function () { parentChosen('parent_cat'); } );
        parentChosen( 'parent_cat' );
    }
);

</script>
...
<div class="parent_cat">
    <label for="parent_cat">[% loc('Top Category') %]  :</label>
    <select name="parent_cat" id="parent_cat">
        <option value=""></option>
        [% FOREACH cat IN categories %]
            <option value="[% cat.category_id %]">[% cat.title %]</option>
        [% END %]
    </select>
</div>

[%-CALL categories.reset; %]
[% FOREACH category IN categories -%]
[% children = category.children %]
[% IF children %]
    <div class="child_cat" id="parent_[% category.category_id %]_children"><br>
        <label for="child_cat">
            [% loc( 'Sub-category' ) %]  :
        </label>
        <select name="child_cat">
            <option value=""></option>
            [% FOREACH child IN children %]
                <option value="[% child.category_id %]">[% child.title %]</option>
            [% END %]
        </select>
    </div>
[% END %]
[%- END %]

[%-CALL categories.reset; %]
[% FOREACH category IN categories -%]
    [% children = category.children %]
    [% FOREACH child IN children %]
    [% next_children = child.children %]
        [% IF next_children %]
            <div class="next_child_cat" id="parent_[% child.category_id %]_children"><br>
                <label for="next_child_cat">
                    [% loc( 'Sub-category' ) %]  :
                </label>
                <select name="next_child_cat">
                    <option value=""></option>
                    [% FOREACH next_child IN next_children %]
                        <option value="[% next_child.category_id %]">[% next_child.title %]</option>
                    [% END %]
                </select>
            </div>
        [% END %]
    [% END %]
[%- END %]
 
Upvote 0 Downvote
You really don't give much away, do you?

Perhaps explaining what "to work" actually entails would be a good start. What is the expected behaviour? What is actually happening? What errors are you seeing? And for Pete's sake, post client-side code. Server-side code is next-to-useless when debugging client-side issues.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Sorry about the lack of information.

my application will have few level chained select box, select parent category, proper children category shows up, and the children category might have their children category as well. Right now I am trying to get sub-category's children show in the select box when proper sub-category item is selected, but i can't seems to get this part working. below is the server-side code and client-side code, Thank you for the help

Code: 
<script type="text/javascript" src="[URL unfurl="true"]http://unbstudent:3000/static/js/effects.js"></script>[/URL]
<script type="text/javascript" src="[URL unfurl="true"]http://unbstudent:3000/static/js/controls.js"></script>[/URL]

<script type="text/javascript">
function parentChosen (parent_cat) {
    parent_cat = $(parent_cat);
    var children = document.getElementsByClassName('child_cat');
    for (i = 0; i < children.length; i++) {
        Element.hide(children[i]);
        children[i].getElementsByTagName("select")[0].disabled = true;
    }

    var child = $("parent_"+parent_cat.value+"_children");
    if (child) {
        child.show();
        childChosen(child);
        child.getElementsByTagName("select")[0].disabled = false;
    }

    else {
        childChosen(null);
    }
}

function childChosen(child) {
    child = $(child);
}

function subparentChosen (child_cat) {
    child_cat = $(child_cat);
    var children = document.getElementsByClassName('next_child_cat');
    for (i = 0; i < children.length; i++) {
        Element.hide(children[i]);
        children[i].getElementsByTagName("select")[0].disabled = true;
    }

    var child = $("parent_"+child_cat.value+"_children");
    if (child) {
        child.show();
        childChosen(child);
        child.getElementsByTagName("select")[0].disabled = false;
    }

    else {
        nextchildChosen(null);
    }
}

function nextchildChosen(next_child_cat) {
    next_child_cat = $(next_child_cat);
}

Event.observe( window, 'load',
    function () {
        Event.observe( 'parent_cat', 'change',  function () { parentChosen('parent_cat'); } );
        parentChosen( 'parent_cat' );
    }
);
</script>
. . . . . 
CLIENT-SIDE CODE:

<div class="parent_cat">
    <label for="parent_cat">Top Category  :</label>

    <select name="parent_cat" id="parent_cat" onchange="paretnChosen(this)">
        <option value=""></option>
        
            <option value="192">Accessibility</option>
        
            <option value="20">Digital Texts</option>
        
            <option value="2">Educational Resources</option>
        
            <option value="57">First Nations</option>
        
            <option value="32">News Media</option>

        
            <option value="34">Resources</option>
        
            <option value="85">Resources For Facilitators</option>
        
            <option value="36">Resources on Plain Language</option>
        
            <option value="41">Software</option>
        
            <option value="86">Tools (School-To-Work)</option>
        
    </select>

</div>

 <div class="child_cat" id="parent_2_children">
        <label for="child_cat">
            Sub-category  :
        </label>
        <select name="child_cat">

            <option value=""></option>
            
                <option value="1">Adult Education</option>
            
                <option value="16">Dictionaries and Reference</option>
            
                <option value="44">Disabilities</option>
            
                <option value="18">Distance Education</option>
            
                <option value="7">Electronic Communication</option>

            
                <option value="13">Employment Readiness</option>
            
                <option value="19">English as a Second Language (ESL)</option>
            
                <option value="12">Family Literacy </option>
            
                <option value="3">General Educational Resources</option>
            
                <option value="195">Health</option>
            
                <option value="77">Justice and Corrections</option>

            
                <option value="27">Libraries </option>
            
                <option value="28">Museums </option>
            
                <option value="37">Plain/Clear Language </option>
            
                <option value="38">Professional Development</option>
            
                <option value="17">Research Tools</option>
            
                <option value="40">Software</option>

            
                <option value="15">Special Education</option>
            
                <option value="6">Subject Areas</option>
            
                <option value="39">Workplace Literacy</option>
            
        </select>
</div>

<div class="child_cat" id="parent_32_children">
        <label for="child_cat">
            Sub-category  :
        </label>
        <select name="child_cat">
            <option value=""></option>
            
                <option value="31">Interesting Media</option>
            
        </select>

    </div>

<div class="child_cat" id="parent_34_children">
        <label for="child_cat">
            Sub-category  :
        </label>
        <select name="child_cat">
            <option value=""></option>
            
                <option value="33">Clear Language and Design (CLAD)</option>

            
                <option value="150">Plain Language Resources</option>
            
        </select>
    </div>

<div class="child_cat" id="parent_36_children">
        <label for="child_cat">
            Sub-category  :
        </label>

        <select name="child_cat">
            <option value=""></option>
            
                <option value="151">General Writing</option>
            
                <option value="35">Style</option>
            
        </select>
</div>

<div class="next_child_cat" id="parent_44_children">
                <label for="next_child_cat">
                    Sub-category  :
                </label>
                <select name="next_child_cat">
                    <option value=""></option>
                    
                        <option value="45">Deaf and Hard of Hearing</option>

                    
                        <option value="43">Learning Disabilities</option>
                    
                        <option value="193">Physical Disabilities</option>
                    
                        <option value="83">Visual Impairment</option>
                    
                </select>
</div>
    
<div class="next_child_cat" id="parent_12_children">
                <label for="next_child_cat">

                    Sub-category  :
                </label>
                <select name="next_child_cat">
                    <option value=""></option>
                    
                        <option value="49">Family Literacy Contacts</option>
                    
                        <option value="29">Resources for Children and Young Adults</option>
                    
                        <option value="30">Resources for Parents</option>
                    
                        <option value="11">Resources for Teachers</option>

                    
                        <option value="51">Social Policy</option>
                    
                </select>
</div>
        
<div class="next_child_cat" id="parent_40_children">
                <label for="next_child_cat">
                    Sub-category  :
                </label>
                <select name="next_child_cat">
                    <option value=""></option>

                    
                        <option value="60">NALD Reviewed</option>
                    
                </select>
</div>
        
div class="next_child_cat" id="parent_6_children">
                <label for="next_child_cat">
                    Sub-category  :
                </label>
                <select name="next_child_cat">
                    <option value=""></option>

                    
                        <option value="73">History/ Geography/ Social Studies</option>
                    
                        <option value="26">Language Arts</option>
                    
                        <option value="22">Math</option>
                    
                        <option value="5">Multi-Subject</option>
                    
                        <option value="173">Music and Art</option>
                    
                        <option value="67">Physical Education and Health</option>

                    
                        <option value="24">Science and Nature</option>
                    
                </select>
            </div>
 
Upvote 0 Downvote
so far I have parent->children working, but the children->children not working
 
Upvote 0 Downvote
right now when I select "Top Category", their proper sub-categories select box will show up, but when I click one sub-category (some sub-categories have children), their sub-category select box doesn't show up.
 
Upvote 0 Downvote
in my application, the parent category has sub-category, sub-catgory can have sub-category, and so on, basically it is unlimited level of "children
 
Upvote 0 Downvote
- You have a function called "parentChosen" but your select element's onchange event calls "paretnChosen" (a typo).

- You have a function called "subparentChosen" which is never called.

Perhaps you should get hold of Firefox and install the Firebug extension - it's god a great debugger which would help you find these things for yourself.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
174
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
181
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
153
malpa
malpa
chrisjchrisj
  • Locked
  • Question
Allow camera access - show camera view -- don’t start recording video
Replies
0
Views
49
chrisjchrisj
chrisjchrisj
chikwendu
  • Locked
  • Question
How do I display an extra input box for editing an existing data?
Replies
1
Views
66
chikwendu
chikwendu

Part and Inventory Search

Sponsor

Back
Top