php uppercase post_title wordpress

Question

I'm have a website on Wordpress. I have a menu displayed on my children pages. everything works perfectly. I have also an Index A, B, C, etc... in format. In my css, everything is in Uppercase. it works on Chrome, Firefox, but not in Safari for example, the options in my menu are in lowercase. So I would need to enter my page tittles myself in Uppercase... which is no the best solution I guess.... so I would like to add a php function to uppercase my post_title instead of using CSS to do it. I know I can use the "strtoupper" function but I don't know who to use it in this case :

echo '<select name="" onchange="location = this.options[this.selectedIndex].value;">';

here is mu full php code building the menu :

<div class="styled-select">
<?php

if(!$post->post_parent){

    $children = get_pages(array(
        'child_of' => $post->ID,
        'post_type' => 'page',
        'post_status' => 'publish',
        'sort_order' => 'ASC',
        'sort_column' => 'post_title',
    ));

}else{

    $children = get_pages(array(
        'child_of' => $post->post_parent,
        'post_type' => 'page',
        'post_status' => 'publish',
        'sort_order' => 'ASC',
        'sort_column' => 'post_title',
    ));
}

if ($children) {
    echo '<select name="" onchange="location = this.options[this.selectedIndex].value;">';
    echo '<option>'. 'A - Z' .'</option>';

    function getInitials($name){
    //split name using spaces
    $words=explode(" ",$name);
    $inits='';
    //loop through array extracting initial letters
    foreach($words as $word){
        $inits = strtoupper(substr($word,0,1));
        break;
    }
    return $inits; 
}
$currval = "";

    foreach($children as $child){
        //print_r($child);
        $permalink = get_permalink($child->ID);
        $initial = getInitials($child->post_title);
        if($initial!='' && $currval != $initial ) {
            $currval = $initial;
            echo '<optgroup label="'.$initial.'""></optgroup>';
        }
        echo '<option value="'.$permalink.'">'.$child->post_title.'</option>';
    }
    echo '</select>';


} ?>


<!-- FIN MENU DEROULANT A-Z -->


</div>

here is a jsfiddle :http://jsfiddle.net/3LZEt/

if anybody can help me ! thanks a lot.

Answer 1

The displayed option text should not have anything to do with your redirect not happening.

Did i understood correctly that the redirect is indeed what is troubleing you? And that you tried safari mobile? if so it doesnt support the onchange, but onblur

echo '<select name="" onblur="location = this.options[this.selectedIndex].value;">';

But this breaks the other browsers i think, so a switch for working browsers and non working ones would be needed to onchange for one and onblur for the other.

EDIT Please see this part, there you have your post title

foreach($children as $child){
    //print_r($child);
    $permalink = get_permalink($child->ID);
    $initial = getInitials($child->post_title);
    if($initial!='' && $currval != $initial ) {
        $currval = $initial;
        echo '<optgroup label="'.$initial.'""></optgroup>';
    }
    echo '<option value="'.$permalink.'">'.$child->post_title.'</option>';
}

So, use this instead

foreach($children as $child){
    //print_r($child);
    $permalink = get_permalink($child->ID);
    $post_title = strtoupper($child->post_title);
    $initial = getInitials($child->post_title);
    if($initial!='' && $currval != $initial ) {
        $currval = $initial;
        echo '<optgroup label="'.$initial.'""></optgroup>';
    }
    echo '<option value="'.$permalink.'">'.$post_title.'</option>';
}