根据另一个下拉列表中的选择填充下拉列表

Question

首先，我想说这样的问题很多，这是一个重复的问题，但是我试图通过查看其他代码来自己解决，但一小时后我放弃了。

我要做的是根据另一个下拉列表中的选择填充下拉列表，但是两个下拉列表的选项都来自数据库。

我不了解jQuery，我还看到有些人使用onChange函数来完成我需要做的事情。

因此，我想解释一下我的问题。 我有2个下拉菜单。 其中一个包含学校名称，另一个包含课程代码。 我需要做的是，我想根据您选择的学校显示课程代码。 因为每所学校都有自己的课程。

这是第一个下拉列表。 foreach循环可能看起来令人困惑。 我只是回显选项，但是如果用户已经选择了学校，那么我将回显所选用户的学校。 这就是为什么我在那里有其他陈述。

$query_schools = "SELECT * FROM SCHOOLS ORDER BY SCHOOL_TYPE ASC";
$query_users = "SELECT USER_SCHOOL FROM USERS WHERE USER_ID = $user1_id";

$schools_result = mysqli_query($dbConnection, $query_schools);
$users_result = mysqli_query($dbConnection, $query_users);

while($data = mysqli_fetch_assoc($users_result)){ $user_school = $data['USER_SCHOOL']; }

foreach($schools_result as $school_result){
    if($user_school == $school_result['SCHOOL_NAME']){
        echo "<option value='$school_result[SCHOOL_SHORT_NAME]' selected>$school_result[SCHOOL_NAME]</option>";
    }else{
        echo "<option value='$school_result[SCHOOL_SHORT_NAME]'>$school_result[SCHOOL_NAME]</option>";
    }
}

这是第二个下拉列表，它们相似。

$query_programs = "SELECT * FROM PROGRAMS ORDER BY PROGRAM_CODE ASC";
$query_users = "SELECT USER_PROGRAM FROM USERS WHERE USER_ID = $user1_id";

$programs_result = mysqli_query($dbConnection, $query_programs);
$users_result = mysqli_query($dbConnection, $query_users);

while($data = mysqli_fetch_assoc($users_result)){ $user_program = $data['USER_PROGRAM']; }

foreach($programs_result as $program_result){
    if($user_program == $program_result['PROGRAM_CODE']){
        echo "<option value='$program_result[PROGRAM_CODE]' title='$program_result[PROGRAM_NAME]' selected>$program_result[PROGRAM_CODE]</option>";
    }else{
        echo "<option value='$program_result[PROGRAM_CODE]'>$program_result[PROGRAM_CODE]</option>";
    }
}

如果它是纯PHP，我应该在第一个查询中这样做：

$query_programs = "SELECT * FROM PROGRAMS WHERE PROGRAM_SCHOOL = '$user_school' ORDER BY PROGRAM_CODE ASC";

谢谢您的帮助。

Answer 1

我不太确定有关php服务器端编码的信息，但我可以告诉您如何从ajax实现加载数据。

假设您有以下2个select

<select class='school'>
     <option value="sc1">school1</option>//Place your school codes in value for option
     <option value="sc2">school2</option>
     <option value="sc3">school3</option>
</select>

<select class="course">
</select>

现在，在第一个下拉列表.school更改后，执行如下的ajax调用：

$('.school').on('change',function()
{
      var selectedSchool=$(this).find('option:selected').val(); //Select the school code which is stored as value for option
      $.ajax({
             url:'/SomeFunction/', //Write a function in the server side which accepts school code as argument
             type:'POST',
             dataType:'json',//return type from server side function [return it as JSON object]
             contentType: "application/json",
             data: JSON.stringify(selectedSchool), //Pass the data to the function on server side
             success: function (data) { //Array of data returned from server side function
                    $.each(data,function(value){
                          $('.course').append('<option>'+value+'</option>');
                    });
             },
             error:
                function (data) {
                    //display any unhandled error
             }
       });
});

Answer 2

在Stackoverflow上，有一个附加了jsfiddle的示例： 根据对其他下拉列表的选择填充一个下拉列表

它通过创建一个已经填充的选择和一个空的选择来工作：

<select id="cat">
    <option val="car">car</option>
    <option val="phone">phone</option>
</select>
<select id="item">
</select>

第一个选择（Id = cat）附加了一个函数，该函数基本上是jquery的“ onChange”方法：

(function() {
      $('#cat').change(function(){
        populateSelect();
    });
});

因此，每当您进行更改（即选择“ id = cat”选择框的另一个项目）时，它都会调用下一个函数，然后使用新的“ <option .... option>”值填充另一个选择框“ id = item”：

cars=new Array("Mercedes","Volvo","BMW","porche");
phones=new Array('Samsung','Nokia','Iphone');

function populateSelect(){
    // get the value that was selected so we can populate the other one
    cat=$('#cat').val();
    // clear the other select box
    $('#item').html('');
    // now fill with new code depending on the slection
    if(cat=='car'){
        // this is jquery's way of a for loop
        cars.forEach(function(t) { 
            // $('#item') refers to the EMPTY select list
            // the .append means add to the object refered to above
            $('#item').append('<option>'+t+'</option>');
        });
    }
    elsif(cat=='phone'){
        phones.forEach(function(t) {
            $('#item').append('<option>'+t+'</option>');
        });
    }
}

Answer 3

回显时，OPTION语句为每种类型的课程代码指定一个唯一的值，并在第二个选择框中为每种选项提供一个匹配的类。

选择框1将具有：

echo "<SELECT onchange='changeCourseCodes(this)'>"
echo "<OPTION value='UNIQUE1' name='Course Type 1'>"
//... more options, then close select

然后确保为第二个选择框提供一个ID，该ID显示更改的值：

echo "<SELECT id='courseCodes'>"
echo "<OPTION class='UNIQUE1'>"
// options, end select, etc.

对于jQuery，您可以只显示一种OPTION类型，用css隐藏其余部分，并在更改选项时使用此命令隐藏/显示其他列表。

<script>
  function changeCourseCodes(selectedOption)
  {
     var classType = $(selectedOption).val(); // get the selected class type
     $('#courseCodes > OPTION').hide(); // hide all options
     $('.' + classType).show(); // show just the chosen ones
  }
</script>

但是，这是未测试的代码，在黑暗中是一击。 遵循这些思路将可以完成任务。

Answer 4

我已经使用javascript实现了相同的功能。 在我的情况下，输入为json。 您可以将输入传递给onchange函数调用，也可以在函数内使用ajax。

的HTML

<table>
<tr>
    <td>
        <select onchange="f(event)">
            <option value="" disabled selected style="display:none;">--Select--</option>
            <option>Offshore</option>
            <option>Onsite</option>
        </select>
    </td>
    <td>
        <select>
            <option>------</option>
        </select>
    </td>
</tr>
   <tr>
    <td>
        <select onchange="f(event)">
            <option value="" disabled selected style="display:none;">--Select--</option>
            <option>Offshore</option>
            <option>Onsite</option>
        </select>
    </td>
    <td>
        <select>
            <option>------</option>
        </select>
    </td>
</tr>

Java脚本

 window.f=function(event){
 onoffelem=event.target;
 locelem=event.target.parentNode.nextSibling.nextSibling.children[0];
 locelem.options.length=0;
 offmap=JSON.parse('{"11":"Chennai","12":"Kolkatta"}');
 onsitemap=JSON.parse('{"1":"USA","2":"Canada"}');
 selectedVal=onoffelem.options[onoffelem.selectedIndex].text;
    if(selectedVal=="Offshore"){
         for(var key in offmap){
             option = document.createElement( 'option' );
             option.value = key;
             option.text = offmap[key]
             locelem.add(option);   
         }
    }else{
        for(var key in onsitemap){
             option = document.createElement( 'option' );
             option.value = key;
             option.text = onsitemap[key]
             locelem.add(option);   
         }
    }

}

JSFiddle演示