Anon
Anon

Reputation: 1221

Get option of a select when the option choice changes

I Have a select list, each option contains a category ($k[3]) in its id.

    <select name="page_from_link" class="my_select_list" >
                <OPTION VALUE="" >With:</OPTION>                
            <?php foreach($pages_created as $k) { 
                $i=0; ?>                        
                <OPTION id="<?php $i."-".$k[3]; ?>" class="pages_created" VALUE="<?php echo $k[0]; ?>" ><?php echo $k[1]; ?></OPTION>           
            <?php } ?>  
    </select>

I have another select list with all options hidden depending on the precedent select category : AS:
$v) { ?>
" >

my jquery script doesn't work, how would you have done that ?

    $(document).ready(function(){         

        $(".my_select_list").change(function(){
            var array = $(this).find('option:selected').attr('id').split('-');
            var cat = array[1];

            alert("cat");

            $("#cat_"+cat).show();
            $(".pages_created_option:not(#cat_"+cat).hide();

        return false;       
        });
    }); 

Upvotes: 0

Views: 190

Answers (3)

user1700243
user1700243

Reputation: 13

add this in the head for javascript

function showsel()
{if(document.getElementById('parentid').value=="id of the option that will triger the shild ")
    {document.getElementById('shild id').style.display="inline";}

else {document.getElementById('shild id').style.display="none";}
}

Then add for the shild

div id="shild id" style="display:none"

and to the parent

div id="parent id" onchange"showsel()" 

Upvotes: 0

roselan
roselan

Reputation: 3775

$(this > option).attr(... => $(this).find('option:selected').attr (...

alert("cat"); => alert(cat);

$("#cat_"+cat+")").show(); => $("#cat_"+cat).show();

you should consider using firebug or chrome internal development tools (on F12).

on a side note, you might like to use optgroup instead of a dummy option:

<select name="page_from_link" class="my_select_list" >
    <OPTGROUP label="With:">
        <?php foreach($pages_created as $k) { 
            $i=0; ?>                        
            <OPTION id="<?php $i."-".$k[3]; ?>" class="pages_created" VALUE="<?php echo $k[0]; ?>" ><?php echo $k[1]; ?></OPTION>           
        <?php } ?>  
    </OPTGROUP>    
</select>

Upvotes: 1

topherg
topherg

Reputation: 4293

you could use either a php script, or a js script with the data encoded, holding the innerHTML and that changes the innerHTML of the parent object (such as a div) depending on what you selected in the previous select box.

Upvotes: 0

Related Questions