Как я могу отредактировать свой выпадающий список, чтобы показать мне результаты с AJAX?(Без перезагрузки)

Question

Я использую форму, которая показывает различные (дополнительные) поля на основе выбора onChange следующего выпадающего списка.

То, что я сделал, я получаю значение, и если значение равно выражению IF, оно отображает правильное дополнительное поле для выбранной категории. Эта процедура выполняется с перезагрузкой страницы.

Мой вопрос: как я могу собрать его с помощью Ajax и избежать перезагрузки? Возможно, Ajax вызовет функцию OnChange. Спасибо!

<select 
onchange="if(this.options.selectedIndex&gt;0) window.location.href = 'http://mypage/?something&value=+this.options[this.options.selectedIndex].value" 
class="select" id="termid" name="termid">
<option value="46">CARS</option>
.
.
</select>

это то, что я нашел из учебника

$(function() {
    $('#sel').change(function() {
        $("input").hide().filter("." + $(this).find("option:selected").val()).show();
    });
    $("input").focus(function() {
        $(this).next("span").fadeIn(1000);
    }).blur(function() {
        $(this).next("span").fadeOut(1000);
    });
});

и CSS, который скрывает все

input{
    display:none;
}
span
{
    display:none;
}

Answer 1

Существует несколько шагов для преобразования загрузки новой страницы в вызов ajax на той же странице:

1. Вам нужно создать php-файл, который просто возвращает html для дополнительных полей (нет head, body, ваш выбор и т. Д.)
2. Вам нужно изменить ваш обработчик событий. Поскольку вы используете jQuery, вы можете удалить весь встроенный JavaScript и просто заменить его на $('#termid').change(function() { // your ajax stuff here });
3. Самым простым вызовом ajax в jQuery является метод load(), поэтому вы можете использовать его как $('#some_div_below_select').load('your_new_php_file.php&value=' + $(this).val());. Это помещает содержимое сгенерированного вами нового php-файла в элемент с идентификатором some_div_below_select.

В той части, где я размещаю ваши Ajax-файлы, вы можете добавить необходимые проверки, например, оператор if, который у вас сейчас есть.

Подводя итог части javascript (я изменил способ передачи параметра):

$(document).ready(function() {
  $('#termid').change(function() {
    $('#some_div_below_select').load('your_new_php_file.php', { "value" : $(this).val() });
  });
});

Answer 2

Использовать событие изменения JavaScript. Свяжите это событие со списком выбора и выполните вызов ajax, чтобы обновить список, когда произойдет изменение.

Если использовать JQuery красиво и легко и много документации