Как вызвать AJAX-запрос на событие изменения выпадающего списка?

Question

index.php

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="ajax.js"></script>

<a href='one.php' class='ajax'>One</a>
<a href='two.php' class='ajax'>Two</a>

<div id="workspace">workspace</div>

one.php

$arr = array ( "workspace" => "One" );
echo json_encode( $arr );

two.php

$arr = array( 'workspace' => "Two" );
echo json_encode( $arr );

ajax.js

jQuery(document).ready(function(){
    jQuery('.ajax').live('click', function(event) {
        event.preventDefault();
        // load the href attribute of the link that was clicked
        jQuery.getJSON(this.href, function(snippets) {
            for(var id in snippets) {
                // updated to deal with any type of HTML
                jQuery('#' + id).html(snippets[id]);
            }
        });
    });
});

Над кодом работает отлично. Когда я нажимаю ссылку «Один», строка «Один» загружается в рабочую область DIV, а когда я нажимаю ссылку «Два», строка «Два» загружается в рабочую область DIV.

Вопрос:

Теперь я хочу использовать выпадающий список для загрузки one.php и two.php в DIV рабочей области вместо ссылок в index.php. Когда я использую ссылку, тогда я использую class = 'ajax' в свойствах ссылки, но как вызвать ajax-запрос при выпадающем событии изменения?

Спасибо

Answer 1

Измените свой код следующим образом:

jQuery('#dropdown_id').live('change', function(event) {
    jQuery.getJSON($(this).val(), function(snippets) {
        for(var id in snippets) {
            // updated to deal with any type of HTML
            jQuery('#' + id).html(snippets[id]);
        }
    });
});

И ваш выпадающий список должен выглядеть так:

<select id="dropdown_id">
  <option value="one.php">One</option>
  <option value="two.php">Two</option>
</select>

Answer 2

Назначить href как значения элементов списка в раскрывающемся списке. Измените выпадающий список, сделайте вызов ajax.

имя класса "ajax" только для справки (полезно, если вы хотите обработать событие для более чем одного элемента).