根据另一个下拉列表填充下拉列表的最佳和最简

在populateSecondDropdown()函数内部定义一个ajax调用 -

Define an ajax call inside inside the populateSecondDropdown() function -

<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 字段(正如 $.each 中的 jquery 代码所预期的那样)并返回一个json 编码的数组是这样的:-

  • And finally the query to fetch 2nd dropdown's options in the AJAX processor file fetchOptions.php. You can use $_POST['id_option'] here to fetch the options under it. The database query here should fetch the option_id and option_name fields for every option (as expected by the jquery code inside $.each) and return a json encoded array like this:-

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

  第二种方法(仅使用 javascript)

  • 获取按第一个下拉列表的字段分组的第二个下拉列表的所有数据.例如.让我们学习第一个下拉菜单中显示的课程和第二个显示的课程下的科目

  • Fetch all the data for the second dropdown grouped by the field of the first dropdown. E.g. let's take courses displayed in the first dropdown and subjects under courses displayed in the 2nd

  • 创建第二个下拉列表的所有选项.在创建如下选项时分配与课程相同的课程:-

  • Create all the options of the 2nd dropdown. Assign classes equal to the courses while creating the options like this:-

  $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 :-

  • Then define onchange="displaySubjectsUnderThisCourse(this);" for the first dropdown and write 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); 
    
    
    }
    

    这里的基本思想是隐藏/显示选项组，但我的代码可能有错误.

    The basic idea here is to hide/display option groups but my code may have errors.

    最后，请注意，第二种方法(获取所有选项值)只有在您的数据量有限并且非常确定将来数据量总是会减少的情况下才会更好.但是，由于没有人能够对未来如此确定，因此建议始终使用 AJAX 方法.

    Finally, please note, the second method (fetching all the option values) would be better only if you have limited small amount of data and are very sure there will always be less data in future. But, since nobody can be so certain about the future, it is advisable to use the AJAX method always.

    这篇关于根据另一个下拉列表填充下拉列表的最佳和最简单的方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！