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-запрос при выпадающем событии изменения?
благодаря
Измените свой код следующим образом:
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>
Присвойте значение href как значения элемента списка в раскрывающемся списке. При изменении выпадающего списка выполните вызов ajax.
Имя класса «ajax» просто для справки (полезно, если вы хотите обрабатывать событие для более одного элемента).