PHP - Обновление значений в выпадающем списке при вводе пользователя

Question

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

Как обновить значения другого выпадающего списка после того, как пользователь выбрал опцию из первого выпадающего списка? Я искал и видел подобный вопрос на SO, но на них не ответил. Надеюсь помочь. Благодарю. Ниже мой текущий код у меня есть.

PS. Если бы я должен был создать html-форму, мне нужно было бы запустить php-скрипт при запуске, без каких-либо вкладов, чтобы заполнить первый выпадающий список. Как мне это сделать? Я знаю только, как отправлять запрос по входам; Например. <input type=submit>

.php

<?php 
$conn = mysql_connect("127.0.0.1","root","") 
mysql_select_db(MyApp,$conn); 


$sql2=("SELECT App.AppName FROM App);    


$result2=mysql_query($sql2); 
echo '<select name="sublist">'; 
echo '<option value=""></option>'; 

while ($row2 = mysql_fetch_assoc($result2)) 
{ 
    echo '<option value="' . $row2['AppName'] . '">' . $row2['AppName']. '</option>'; 
} 
echo '</select>';           
?> 

Answer 1

У вас есть два решения для этого.

1. ли полностью в PHP (я не рекомендую, так как, это не очень удобный)
2. Ajax на основе (более дружественным к пользователю)

Однако выполнять обе вещи в хорошем образом, вам нужна поддержка of Javascript

Так что если я объясню вам решение одно. Как только пользователь изменит ваш первый раскрывающийся список. Вы должны отправить страницу на ту же страницу, используя событие onChange(). Затем на вашей странице установите элементы для второго раскрывающегося списка так же, как и для первого раскрывающегося списка.

Второе решение требует AJAX. После того, как пользователь изменит первый раскрывающийся список, вы делаете запрос AJAX на страницу. На этой странице вы поймаете пользователя выбора. И вы генерируете второе раскрывающееся меню на основе этого. Здесь вы можете использовать три метода для получения второго раскрывающегося списка или его данных.

a. Вы генерируете все параметры с этой страницы и отправляете обратно. Установите внутреннийHTML второго выпадающего списка.

b. Получите данные как JSON и запишите их раскрывающийся список на основе этого.

c. Получите XML-файл AJAX и запишите его раскрывающееся меню на основе этого.

Answer 2

есть более чем один способ сделать это:

1) есть запрос, отправленный на сервер с выбором пользователя, получить содержимое второго поле выбора и отобразить его. Это также может быть сделано двумя способами а) AJAX - чтобы страница не обновляется (гладкий пользовательский опыт) б) освежит всю страницу - (проще реализовать)

2) нагрузки все комбинации а затем по выбору пользователя укажите конкретный раскрывающийся список. Это возможно только (если не создавать большие страницы), если у вас есть небольшие выпадающие списки с несколькими комбинациями.

Как указано another poster, всем методам требуется JavaScript (в некоторой степени) для запуска. Пожалуйста, уточните, какой подход является желательным, и я перейду более подробно.

Answer 3

Посмотреть источник для копирования кода.У JQuery есть способ сделать это простым. Я использовал создателя формы, который я сделал на заказ. Но вот выход - ручной способ.

Адрес your ajax. Он идет в JS или в заголовке.

function getXMLObject() //XML OBJECT 
    { 
     var xmlHttp = false; 
     try { 
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") // For Old Microsoft Browsers 
     } 
     catch (e) { 
     try { 
      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") // For Microsoft IE 6.0+ 
     } 
     catch (e2) { 
      xmlHttp = false // No Browser accepts the XMLHTTP Object then false 
     } 
     } 
     if (!xmlHttp && typeof XMLHttpRequest != 'undefined') { 
     xmlHttp = new XMLHttpRequest();  //For Mozilla, Opera Browsers 
     } 
     return xmlHttp; // Mandatory Statement returning the ajax object created 
    } 

    var xmlhttp = new getXMLObject(); //xmlhttp holds the ajax object 

    function makeAjaxRequest(url, params, output, image) { 
     var getdate = new Date(); //Used to prevent caching during ajax call 
     if(image == 1){ 
      document.getElementById(output).innerHTML='<img src="./images/template/ajax-loader.gif"></img>'; 
     } 
     if(xmlhttp) { 
     xmlhttp.open("POST",url,true); //calling testing.php using POST method 
     xmlhttp.onreadystatechange = function(){ 
      if (xmlhttp.readyState == 4) { 
      if(xmlhttp.status == 200) { 
       document.getElementById(output).innerHTML=xmlhttp.responseText; //Update the HTML Form element 
      } 
      else { 
    //   alert("Error during AJAX call. Please try again"); 
      } 
      }  
     } 
     xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
     xmlhttp.send(params); //Posting txtname to PHP File 
     } 
    } 

    function makeAjaxGetRequest(url, output, image) { 
     var getdate = new Date(); //Used to prevent caching during ajax call 
     if(image == 1){ 
      document.getElementById(output).innerHTML='<img src="./images/template/ajax-loader.gif"></img>'; 
     } 
     if(xmlhttp) { 
     xmlhttp.open("GET",url,true); //calling testing.php using GET method 
     xmlhttp.onreadystatechange = function(){ 
      if (xmlhttp.readyState == 4) { 
      if(xmlhttp.status == 200) { 
       document.getElementById(output).innerHTML=xmlhttp.responseText; //Update the HTML Form element 
      } 
      else { 
    //   alert("Error during AJAX call. Please try again."); 
      } 
      }  
     } 
     xmlhttp.send(null); //Posting txtname to PHP File 
     } 
    } 

    function emptyAjaxReportBox(id) 
    { 
     document.getElementById(id).innerHTML= ''; 
    } 

Вот файл, который пользователь переходит:

// your call file; what you posted above. Obviously change the names and Id's to match what you need. 
<form id="testFormId" name="testForm" action="post" > 
<select id="firstSelectId" name="firstSelect" onchange="makeAjaxRequest('url', 'firstSelect='+encodeURIComponent(document.getElementById('firstSelectId').value),'outputDivId', '0');" > 
</select> 
<div id="outputDivId" > 
<select name="secondInput">Whatever values you want to load up can go in here. They can be the default values; meaning, if select 1 value = 0, then you have have these values in select 2. Once you change select 1, this will disappear and be replaced by what your ajax returns. Therefore, for easy processing after you submit the form, you should make this select 2 the same name and id as what you use in the ajax.</div> 
</form> 

Вот файл, который вызывается по АЯКС запросу.

//your AJAX file needs to be a separate page than what you're currently reading. Put whatever you want in there. 
$db = connectioninfo; 
$query; 
echo 'What you put in the echo is what will show up in the outputDiv. <select></select>';