jquery根据第一个菜单中的选项填充第二个菜单

Question

我确信这已被询问和回答很多次，但我找不到工作解决方案。我想第二个菜单来填充基于第一菜单中进行选择：

<form id="form1" name="form1" method="post" action=""> 
    <select name="sub_discipline" id="sub_discipline"> 
    <option>Select Sub-discipline...</option> 
    <?php 
$query = mysql_query("SELECT * from sub_discipline ORDER BY name ASC"); 
for($i=0;$i<mysql_num_rows($query);$i++) { 
$row=mysql_fetch_assoc($query); 
?> 
    <option value="<?php echo $row['sub_discipline_pk']; ?>"><?php echo $row['name']; ?></option> 
    <?php 
} 
?> 
    </select> 
    <select name="topic_place" id="topic_place"> 
    <option>Select Topic...</option> 
    </select> 
</form> 

我有以下JS：

<script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script type="text/javascript"> 

$(function() { 
    $(':input[name=sub_discipline]').change(function(e) { 
     $.get(
      'get_topics.php', 
      {'sub_discipline_pk':$(this).val()}, 
      function(data) { 
       $(':input[name=topic_place]').html(data); 
      }, 
      'html' 
     ); 
    }).change(); 
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

</script> 

get_topics.php有

$sub_discipline_pk = $_GET['sub_discipline_pk']; 

$query = "SELECT * FROM topic WHERE sub_discipline_fk = '$sub_discipline_pk'"; 
$result = mysql_query($query, $connection) or die(mysql_error()); 

while ($row = mysql_fetch_array($result)) { ?> 
    <option value="<?php echo $row['topic_pk']; ?>"> 
    <?php echo $row['title']; ?></option> 
    <?php } 
    ?> 

get_topics.php退货：

<option value="1"> 
    Topic 1</option> 
     <option value="2"> 
    Topic 2</option> 

所以上述应该工作...

感谢您的任何帮助！

Answer 1

我决定只用Ajax解决方案去：

<script type="text/javascript"> 
function getXMLHTTP() { //function to return the xml http object 
     var xmlhttp=false; 
     try{ 
      xmlhttp=new XMLHttpRequest(); 
     } 
     catch(e) {  
      try{    
       xmlhttp= new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      catch(e){ 
       try{ 
       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
       } 
       catch(e1){ 
        xmlhttp=false; 
       } 
      } 
     } 

     return xmlhttp; 
    } 



    function getTopics(strURL) {   

     var req = getXMLHTTP(); 

     if (req) { 

      req.onreadystatechange = function() { 
       if (req.readyState == 4) { 
        // only if "OK" 
        if (req.status == 200) {       
         document.getElementById('topics').innerHTML=req.responseText;      
        } else { 
         alert("There was a problem while using XMLHTTP:\n" + req.statusText); 
        } 
       }    
      }   
      req.open("GET", strURL, true); 
      req.send(null); 
     } 

    } 
</script> 

形式：

<form id="form1" name="form1" method="post" action=""> 
    <table width="61%" border="0"> 
    <tr> 
     <td width="16%">Sub-discipline</td> 
     <td colspan="2"><select name="sub_discipline" id="sub_discipline" onChange="getTopics('get_topics.php?sub_discipline_pk='+this.value)">> 
        <option>Select Sub-discipline...</option> 
        <?php 
$query = mysql_query("SELECT * from sub_discipline ORDER BY name ASC"); 
for($i=0;$i<mysql_num_rows($query);$i++) { 
$row=mysql_fetch_assoc($query); 
?> 
        <option value="<?php echo $row['sub_discipline_pk']; ?>"><?php echo $row['name']; ?></option> 
        <?php 
} 
?> 
       </select></td> 
    </tr> 
    <tr> 
     <td>Title</td> 
     <td colspan="2"><input name="title" type="text" id="title" size="45" maxlength="100" /></td> 
    </tr> 
    <tr> 
     <td>Topic</td> 
     <td colspan="2"><textarea name="topic" id="topic" cols="45" rows="5"></textarea></td> 
    </tr> 
    <tr> 
     <td>Placement</td> 
     <td width="22%"><p> 
     <label> 
      <input type="radio" name="order" value="before" id="order_0" /> 
      Before</label> 

     <label> 
      <input type="radio" name="order" value="after" id="order_1" /> 
      After</label> 
     <br /> 
     </p></td> 
     <td><div id="topics"></div></td> 
    </tr> 
    <tr> 
     <td>Available to Program</td> 
     <td colspan="2">&nbsp;</td> 
    </tr> 
    </table> 
</form> 

get_topics.php：

<?php 
require_once('../connection/connect.php'); 
mysql_select_db($database, $connection); 

$sub_discipline_pk = $_GET['sub_discipline_pk']; 

$query = "SELECT * FROM topic WHERE sub_discipline_fk = '$sub_discipline_pk'"; 
$result = mysql_query($query, $connection) or die(mysql_error()); 

?> 
<select name="topic"> 
<option>Select a topic...</option> 
<?php while($row=mysql_fetch_array($result)) { ?> 
<option value="<?php echo $row['topic_pk']; ?>"><?php echo $row['title']?></option> 
<?php } ?> 
</select>