Как заполнить надежное раскрывающееся меню с помощью Ajax и php

Привет, я хочу управлять данными в раскрывающемся меню с помощью Ajax.

Поля Databse:

1.id

2.name

3.department

myDesgin.php

<select id="id"></select> <select id="name"></select> <select id="department"></select>

1. Если я выбрал одно раскрывающееся меню для изменения других выпадающих меню, зависит от выбранного значения с помощью Ajax.

2.Is там любой доступный код, если я выбираю один выпадающий список, он переходит в другое дочернее окно и отображает данные как в табличном формате (например, отчете) с использованием Ajax .

Заранее спасибо.

Пожалуйста, дайте мне пример кода, потому что я новичок в ajax, очень приветствую, если кто-то объяснит код (для ajax).

Да, проверьте следующий код jquery ajax. В этом примере, если вы измените «Департамент», тогда он заполнит список раскрывающегося списка «Имя».

 $(document).on("change", '#department', function(e) { var department = $(this).val(); $.ajax({ type: "POST", data: {department: department}, url: 'admin/users/get_name_list.php', dataType: 'json', success: function(json) { var $el = $("#name"); $el.empty(); // remove old options $el.append($("<option></option>") .attr("value", '').text('Please Select')); $.each(json, function(value, key) { $el.append($("<option></option>") .attr("value", value).text(key)); }); } }); });

Я думаю, вы можете это сделать:

сделать глобальную функцию, которая принимает два аргумента: currElem, nextElem и dataObj :

 function dynoDropdowns(currElem, nxtElem, dataObj){ $.ajax({ url:"path/to/file", type:"post", data:dataObj, dataType:"json", // <-------------expecting json from php success:function(data){ $(nxtElem).empty(); // empty the field first here. $.each(data, function(i, obj){ $('<option />', { value:obj.value, text:obj.text } ).appendTo(nxtElem); }); }, error:function(err){ console.log(err); } }); }

теперь ваши события изменения:

 $(function(){ $('select').on('change', function(e){ if(this.id === "id"){ var dataObj = {id:this.value}; dynoDropdowns(this, '#name', dataObj); }else if(this.id === "name"){ var dataObj = {name:this.value}; dynoDropdowns(this, '#department', dataObj); } }); });

заданы select1 и select2 следующим образом:

 <select id="select1"> <option id="11" value="x">X</option> <option id="12" value="y">Y</option> </select> <select id="select2"> <option id="21" value="1">1</option> <option id="22" value="2">2</option> </select>

то вы можете сделать что-то подобное с помощью jQuery:

 $('#select1').on('change', function() { $.ajax({ url: "test.html", }).done(function(response) { $('#select2').html(response); });

Это предполагает, что ваш вызов ajax возвращает строку типа

 <option id="21" value="3">3</option><option id="22" value="4">4</option>

с вашего сервера. Если вы вернете json, вы должны сначала его декодировать, но это общий смысл. Взгляните на функцию jQuery ajax ()

Хотя есть много доступных кодов. Я пишу для вас самый простой и простой код.

HTML

 <select id="id" onchange="update_name(this.id)"></select>

Код AJAX

 function update_name(id) { var xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txt").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","update_data.php?q="+id,true); xmlhttp.send(); }

update_data.php (код PHP)

 <?php if(isset($_GET['q']) { $id= $_GET['q']; //based on id run your query }