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

Первый и лучший метод (если у вас есть или может быть достаточно данных по конкретным параметрам)
Используйте AJAX. Это самый простой способ, по-моему, по сравнению с другими способами его реализации. Используйте JQuery для реализации AJAX. Это делает AJAX кусок пирога! Здесь я делюсь своим куском пирога –

Ниже приведен полный код, который вам нужен –

• Вызовите функцию javascript populateSecondDropdown () при первом выборе, например:

    echo "<select name='course[]' value='' multiple='multiple' size=10 onchange='populateSecondDropdown(this, 'http://yourprojectUrl','Any Subject');'>"; // printing the list box select command echo "<option value=''>All</option>"; while($ntc=mysqli_fetch_array($queryc)) {//Array or records stored in $nt echo "<option value=\"$ntc[course]\">\"$ntc[course]\"</option>"; /* Option values are added by looping through the array */ } echo "</select>";// Closing of list box в  echo "<select name='course[]' value='' multiple='multiple' size=10 onchange='populateSecondDropdown(this, 'http://yourprojectUrl','Any Subject');'>"; // printing the list box select command echo "<option value=''>All</option>"; while($ntc=mysqli_fetch_array($queryc)) {//Array or records stored in $nt echo "<option value=\"$ntc[course]\">\"$ntc[course]\"</option>"; /* Option values are added by looping through the array */ } echo "</select>";// Closing of list box 

• Определите вызов ajax внутри функции populateSecondDropdown () –

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script type="text/javascript"> function populateSecondDropdown(object,baseUrl) { $.ajax({ type: "POST", url: baseUrl+"/ajax/fetchOptions.php", data: { id_option: $(object).val(), operation: 'get_subjects' }, dataType: "json", success: function(data) { //Clear options corresponding to earlier option of first dropdown $('select#secondDropdown').empty(); $('select#secondDropdown').append('<option value="0">Select Option</option>'); //Populate options of the second dropdown $.each( data.subjects, function() { $('select#secondDropdown').append('<option value="'+$(this).attr('option_id')+'">'+$(this).attr('option_name')+'</option>'); }); $('select#secondDropdown').focus(); }, beforeSend: function() { $('select#secondDropdown').empty(); $('select#secondDropdown').append('<option value="0">Loading...</option>'); }, error: function() { $('select#secondDropdown').attr('disabled', true); $('select#secondDropdown').empty(); $('select#secondDropdown').append('<option value="0">No Options</option>'); } }); } </script> 

  • И, наконец, запрос на выбор 2 вариантов выпадающего списка в файле AJAX-файла fetchOptions.php. Вы можете использовать $ _POST ['id_option'] здесь, чтобы выбрать параметры под ним. Запрос базы данных здесь должен извлекать option_id и option_name для каждой опции (как ожидается в коде jquery внутри $.each ) и возвращать json-закодированный массив следующим образом:

     return json_encode(array("subjects" => $resultOfQuery)); 

Второй метод (только с использованием javascript)

• Выбираем все данные для второго раскрывающегося списка, сгруппированного по полю первого выпадающего списка. Например, давайте проведем курсы, отображаемые в первом выпадающем меню, и предметы под курсами, отображаемые во втором

  • Создайте все варианты второго выпадающего списка. Присвоить классы, равные курсам, при создании таких вариантов:

     $querycourse = "SELECT course, subject FROM subjects WHERE subject IS NOT NULL GROUP BY course "; $procc = mysqli_prepare($link, $querycourse); $queryc = mysqli_query($link, $querycourse) or die(mysqli_error($link)); echo "<select name='subjects[]' value='' multiple='multiple' size=100>"; echo "<option value=''>All</option>"; while($ntc=mysqli_fetch_array($queryc)) {//Array or records stored in $nt echo "<option value=\"$ntc[subject]\" class=\"$ntc[course]\">\"$ntc[subject]\"</option>"; } echo "</select>"; в $querycourse = "SELECT course, subject FROM subjects WHERE subject IS NOT NULL GROUP BY course "; $procc = mysqli_prepare($link, $querycourse); $queryc = mysqli_query($link, $querycourse) or die(mysqli_error($link)); echo "<select name='subjects[]' value='' multiple='multiple' size=100>"; echo "<option value=''>All</option>"; while($ntc=mysqli_fetch_array($queryc)) {//Array or records stored in $nt echo "<option value=\"$ntc[subject]\" class=\"$ntc[course]\">\"$ntc[subject]\"</option>"; } echo "</select>"; 

  • Затем определите onchange="displaySubjectsUnderThisCourse(this);" для первого раскрывающегося списка и напишите этот javascript: –

      function displaySubjectsUnderThisCourse(object) { var selectedCourse = $(object).val(); //Display the options with class = the selected option from first dropdown $("."+selectedCourse).removeClass("hidden"); //define a class hidden with display:none; $('option:not(.selectedCourse)').hide(); // hide all options whose class is other than selectedCourse - Not sure whether this will work or not, though //Deselect any previous selections //If single option selection is allowed $('select#secondDropdown option').attr('selected', false); // or following if multiple selection is allowed (needed for IE) $('select#secondDropdown option').attr('selectedIndex', -1); } 

    Основная идея здесь состоит в том, чтобы скрыть / отобразить группы опций, но у моего кода могут быть ошибки.

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

Существует два метода:

• Во-первых, вы можете загрузить все варианты для второго списка выбора в массив JavaScript. Когда в первом выборе выбрана опция, введите вторую с соответствующими параметрами.
• Во-вторых, вы можете использовать Ajax для вызова на сервер и выбор параметров для второго выбора в зависимости от выбора первого. Затем сервер будет возвращать список параметров (по одному на строку, с разделителями табуляции – как это делается), которые вы анализируете и используете для заполнения второго выбора.

Первый вариант очень быстрый и простой, но может потребоваться некоторое время для загрузки, если у вас есть большой список опций для второго выбора.

Второй вариант более сложный, но гораздо более гибкий.

Вот несколько кодов Ajax, чтобы вы начали:

Создайте запрос:

 var HTTP_UNINITIALIZED = 0; var HTTP_SETUP_NOTSENT = 1; var HTTP_PROCESSING = 2; var HTTP_PARTIAL_RESULT = 3; var HTTP_COMPLETE = 4; function createRequest() { var request = null; try { request = new XMLHttpRequest(); } catch( failed_once ) { try { request = new ActiveXObject( "Msxml2.XMLHTTP" ); } catch( failed_twice ) { try { request = new ActiveXObject( "Microsoft.XMLHTTP" ); } catch( failed_thrice ) { request = null; } } } return( request ); } 

Отправить запрос:

 var request = createRequest(); function doSearch( value ) { getURL = "<url to get list>?Value=" + value; request.open( "POST", getURL, true ); request.onreadystatechange = showResults; request.send( null ); } 

Используйте результаты:

 function showResults() { if( request.readyState == HTTP_COMPLETE && request.status == 200 ) { if( request.responseText != "" ) { var lines = request.responseText.split( "\n" ); for( i = 0 ; i < lines.length ; i++ ) { var parts = lines[i].split( "\t" ); // populate the second select } } } } 

Как вы обрабатываете часть сервера, зависит от вас.