Question

我被困在我的网站上。我在从mysql填充的HTML网页上有3个下拉列表。例如，在我的表格中，我在列中有5个字段（option 1，option 2，option 3，option 4，option 5）。在我的下拉列表中，我希望能够从下拉列表option 1中选择list A，然后在下拉列表B和C中没有option 1;如果我将其更改为option 2，那么option 1应该可以在下拉列表B和C中使用 - 依此类推。

反正这样做了吗？我一直在尝试使用php和javascript，但没有任何运气。

以下是我已经拥有的代码 - 仍然没有新的

HTML

    <!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" language="javascript">
            $(document).ready(function()
            {
                $(".Qual1").change(function()
            {
                var id=$(this).val();
                var Userid= 
                        <?php
                            $connection = mysql_connect("localhost","root","") or die ("Error connecting to mysql server: ".mysql_error());
                            mysql_select_db("mytestdb", $connection) or die ("Error selecting specified database on mysql server: ".mysql_error());

                            $log_user = $_SESSION['login_user'];
                            $sqlquery = mysql_query("select fnGetUserID('$log_user') as UserID", $connection);
                            $row = mysql_fetch_assoc($sqlquery);

                            echo $row['UserID'];
                        ?>;
                var Circuitid = 
                        <?php
                            $connection = mysql_connect("localhost","root","") or die ("Error connecting to mysql server: ".mysql_error());
                            mysql_select_db("mytestdb", $connection) or die ("Error selecting specified database on mysql server: ".mysql_error());

                            $race_name = $_SESSION['Race'];
                            $sqlquery = mysql_query("select fnGetCircuitID('$race_name') as RaceID", $connection);
                            $row = mysql_fetch_assoc($sqlquery);

                            echo $row['RaceID'];
                        ?>;

                    <?php echo json_encode($_SESSION['Race']); ?>;
                var dataString = 'id='+id+'&Userid='+Userid+'&Circuitid='+Circuitid;

                //alert(dataString);

               $.ajax
                ({
                type: "POST",
                url: "ajaxDrivers.php",
                data: dataString,
                cache: false,
                success: function(html)
                {
                $(".Qual2").html(html);
                } 
                });

            });
            });
        </script>
        <title>Your Home Page</title>
        <link href="style.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="profile">
            <b id="Go Back"><a href="profile.php">Go Back</a></b>
            <br>
            <br>
            <b id="welcome">Making Picks for : <i><?php echo  $_SESSION['Race']  ?></i></b>
            <br>
            <br>
        </div>

        <form action="">
            <table>
            <tr>
                <td colspan='2'>Prediction Form</td>
            </tr>
            <tr>
                <td>Qualifying 1:</td>
                <td>
                    <select id="Qual1" name="Qual1" class="Qual1">

                        <?php

                            $log_user = $_SESSION['login_user'];

                            $connection = mysql_connect("localhost","root","") or die ("Error connecting to mysql server: ".mysql_error());
                            mysql_select_db("mytestdb", $connection) or die ("Error selecting specified database on mysql server: ".mysql_error());            

                            // Get the UserID
                            $sqlquery = mysql_query("select fnGetUserID('$log_user') as UserID", $connection);
                            $row = mysql_fetch_assoc($sqlquery);
                            $_SESSION['intUserID'] =$row['UserID'];

                            // Unset Variable to be ised again
                            unset($sqlquery);
                            unset($row);        

                            $race_name = $_SESSION['Race'];

                            // Get the UserID
                            $sqlquery = mysql_query("select fnGetCircuitID('$race_name') as RaceID", $connection);
                            $row = mysql_fetch_assoc($sqlquery);
                            $_SESSION['intRaceID'] =$row['RaceID'];

                            $race_id = $_SESSION['intRaceID'];
                            $user_id = $_SESSION['intUserID'];

                            $qual1 = mysql_query("CALL spGetDrivers($user_id,$race_id)");
                            //$rows = mysql_query($qual1) or die ("Query to get data from firsttable failed: ".mysql_error());
                            while($rs=mysql_fetch_array($qual1)){
                                  echo '<option value="'.$rs['pkDriverID'].'">'.$rs["strDriverName"].'</option>';
                              }

                        ?>

                    </select>
                </td>
        </tr>
        <tr>
                <td>Qualifying 2:</td>
                <td>
                    <select id="Qual2" name="Qual2" class="Qual2">

                        <option selected="selected">--Select Driver--</option>

                    </select>
                </td>
            </tr>
            </table>
        </form>
    </body>
</html>

PHP

<?php

header('Content-Type: text/html; charset=ISO-8859-15');
$connection = mysql_connect("localhost","root","") or die ("Error connecting to mysql server: ".mysql_error());
mysql_select_db("mytestdb", $connection) or die ("Error selecting specified database on mysql server: ".mysql_error());  
if($_POST['id'])
{
    $id=$_POST['id'];
    $userID=$_POST['Userid'];
    $CircuitID=$_POST['Circuitid'];

    $rs=mysql_query("CALL spInTempDriver($userID,$CircuitID,$id)");

    //echo '<option value="'.$CircuitID.'">'.$CircuitID.'</option>';

    $sql=mysql_query("CALL spGetDrivers($user_id,$CircuitID)");

    while($row=mysql_fetch_array($sql))
    {
        $id=$row['pkDriverID'];
        $data=$row['strDriverName'];
        echo '<option value="'.$id.'">'.$data.'</option>';
    }
}

?>

Answer 1

您需要为更改的列表事件编写事件处理程序代码，并且在该处理程序中，您需要评估所选项目的值。一旦你知道，你可以重建其他列表。

Answer 2

这是一个jsfiddle，如果已经在另一个option元素中选择了select，则使用jQuery来禁用它们。

JS：

$(function() {

  $("select").on("change", function() { // select on change event

    var selectedValues = []; // array of all the values selected by any select element
    $("select > option:selected").each(function() {
      var val = $(this).val();
      if (val != "") { // exlude the value if it is ""
        selectedValues.push(val);
      }
    });

    $("select").not($(this)).each(function() { // for each other select element
      var selectedValue = $(this).val(); // value of the currently selected option for this select element
      $(this).find("option").each(function() { // for each option
        if ($(this).val() != selectedValue && selectedValues.indexOf($(this).val()) > -1) { // disable only if not the currently selected option and if it is selected by a select element
          $(this).hide();
        } else {
          $(this).show(); // else show the option if it is hidden
        }

      });
    });

  });

});

依赖下拉html，允许在网页上使用不同的值

2 个答案: