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>

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

1 个答案: