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

Question

Очень просто, у меня есть одно выпадающее меню, динамически заполняемое данными:

Код SQL

$querycourse = "SELECT course, COUNT(course) AS count FROM acme WHERE course IS NOT NULL GROUP BY course ";
$procc = mysqli_prepare($link, $querycourse);
$queryc =  mysqli_query($link, $querycourse) or die(mysqli_error($link));

Код PHP

echo "<select name='course[]' value='' multiple='multiple' size=10>";
            // 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 

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

Я использую MySQL, PHP, Javascript и также могу (одним нажатием) использоватьJQuery.У меня нет опыта в Ajax.

Кто-нибудь будет любезен указать мне правильное направление?!

Заранее спасибо, как всегда,

Гомер.

Answer 1

Первый и лучший метод (если у вас есть или может быть достаточно данных, специфичных для опций)
Используйте 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 
  

• Определить 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>
  

  • И, наконец, запросполучить параметры второго раскрывающегося списка в файле процессора 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>";
    

  • Затем определите 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.

Answer 2

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

• Во-первых, вы можете загрузить все варианты для второго списка выбора в массив 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
      }
    }
  }
}

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