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

4 回答

• 2

  我对 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
               }
         });
  });
  

  回复于 2024-04-28T02:29:30+08:00
• 2

  在Stackoverflow上有一个附有jsfiddle的例子：Populate one dropdown list based on the selection of other dropdown list

  它的工作原理是创建一个已填充的选择和一个EMPTY选择：

  <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>');
          });
      }
  }
  

  回复于 2024-04-28T02:29:30+08:00
• 1

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

  选择框1将具有：

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

  然后一定要给第二个选择框提供一个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>
  

  这是未经编码的代码，在黑暗中刺伤 . 沿着这些方向的东西将完成它 .

  回复于 2024-04-28T02:29:30+08:00
• 2

  我使用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>
  

  使用Javascript

  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 Demo

  回复于 2024-04-28T02:29:30+08:00