三个基于先前的jquery选择每个

Question

I'm trying to do 3 selects in cakePhp + jQuery first one with provinces, second - localities, third - schools in that place. Here is my cake code (so far):

           echo $this->Form->input('proviences', array(
                'type' => 'select',
                'empty' => true,
                'options' => $proviences,
                'label' => 'Province',
                'class' => 'proviences',
                'before' => '<div style="float:left;width:180px"',
                'after' => "</div>"
            ));

            echo $this->Form->input('localities', array(
                'type' => 'select',
                'empty' => true,
                'options' => $localities,
                'label' => 'City',
                'class' => 'localities',
                'before' => '<div style="float:left;width:180px"',
                'after' => "</div>"
            ));
            $schoolList = array();
            foreach($schools as $value) {
                $schoolsList[]=$value['name'];
            }
            echo $this->Form->input('school_id', array(
                'label' => 'Szkoła',
                'options' => $schoolsList,
                'empty' => true,
                'before' => '<div style="float:left;width:240px"',
                'after' => "</div>",
                'onchange' => "submit();",
            ));

In $schools i have a list looking this way

array(
   id1 => array(
         'name' => 'some_name',
         'province' => 'some_province',
         'locality' => 'some_city'
         )
)

and using this to get lists of provinces,localities and school names I was trying to use this but couldn't get it working ;/ Filter three select boxes based on previous selections Is there a way of doing it in jQuery without ajax?

Answer 1

you can do it without using ajax, but for that you would need the schools array on client side, and create/edit options based on that on the client side, too.

here is a working fiddle. (hastily thrown together, but you get the idea). You need to get the schools array into js, though. you could either use AJAX for that or, pass it as json on the page:

echo 'var schools = JSON.parse('.json_encode($schools).');

You have to think about where to place that, too, so that the variable doesn't leak into the global scope. you could put it in the jQuery closure, for example:

echo '(function($){';
echo 'var schools = JSON.parse('.json_encode($schools).');

// now the javascript from the fiddle...

echo '}(jQuery))';