Question

我有一个包含多个<select>输入的PHP脚本。这些<select>下拉列表的值是从同一个数据库表中获取的。

<tr>
    <td><div align="right">Nama Penguji</div></td>
    <td>:</td>
    <td>
        <select name="nama_penguji" id="nama_penguji">
            <option value="-">------------ Penguji -----------</option>
    <?php
      $myslq3 = "SELECT * FROM penguji ORDER BY id";
      $myqry3 = mysql_query($myslq3) or die ("Gagal Query".mysql_error());
      while ($mydata3 = mysql_fetch_array($myqry3)) {
            echo "<option value='$mydata3[nama_penguji]'>$mydata3[nama_penguji]</option>";
      }

      ?>
        </select>
    </td>
  </tr>
  <tr>
    <td><div align="right"></div></td>
    <td>&nbsp;</td>
    <td>
        <select name="nama_penguji2" id="nama_penguji2">
            <option value="-">------------ Penguji -----------</option>
    <?php
      $myslq3 = "SELECT * FROM penguji ORDER BY id";
      $myqry3 = mysql_query($myslq3) or die ("Gagal Query".mysql_error());
      while ($mydata3 = mysql_fetch_array($myqry3)) {
            echo "<option value='$mydata3[nama_penguji]'>$mydata3[nama_penguji]</option>";
      }
      ?>
        </select>
    </td>
</tr>
<tr>
    <td><div align="right"></div></td>
    <td>&nbsp;</td>
    <td>
        <select name="nama_penguji3" id="nama_penguji3">
            <option value="-">------------ Penguji -----------</option>
    <?php
      $myslq3 = "SELECT * FROM penguji ORDER BY id";
      $myqry3 = mysql_query($myslq3) or die ("Gagal Query".mysql_error());
      while ($mydata3 = mysql_fetch_array($myqry3)) {
            echo "<option value='$mydata3[nama_penguji]'>$mydata3[nama_penguji]</option>";
      }
      ?>
        </select>
    </td>
</tr>

我可以这样做，以便用户无法在不重新加载页面的情况下在其他<select>下拉菜单中选择相同的选项吗？

Answer 1

我确信使用jQuery（或一般的javascript）技能更好的人可以做得更好。

演示： http://jsfiddle.net/brebk342/

<?php
    // It looks like you query 3 times the same thing, you can just query once and save the results
    $myslq3 = "SELECT * FROM penguji ORDER BY id";
    $myqry3 = mysql_query($myslq3) or die ("Gagal Query".mysql_error());
    while ($mydata3 = mysql_fetch_array($myqry3)) {
            $opts[] =   "<option value='$mydata3[nama_penguji]'>$mydata3[nama_penguji]</option>";
        }
?>
<table>
<tr>
    <td><div align="right">
            Nama Penguji
        </div></td>
    <td>:</td>
    <td><select name="nama_penguji" id="nama_penguji" class="nama_pen">
            <option value="-">------------ Penguji -----------</option>
            <?php echo $dropdown = implode(PHP_EOL,$opts); ?>
        </select></td>
</tr>
<tr>
    <td><div align="right">
        </div></td>
    <td>&nbsp;</td>
    <td><select name="nama_penguji2" id="nama_penguji2" class="nama_pen">
            <option value="-">------------ Penguji -----------</option>
            <?php echo $dropdown; ?>
        </select></td>
</tr>
<tr>
    <td><div align="right">
        </div></td>
    <td>&nbsp;</td>
    <td><select name="nama_penguji3" id="nama_penguji3" class="nama_pen">
            <option value="-">------------ Penguji -----------</option>
            <?php echo $dropdown; ?>
        </select></td>
</tr>
<table>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script>
// On changing of a dropdown with this class name
$(".nama_pen").change(function() {
    // Assign a save object
    var SaveSpot    =   {};
    // loop through same-named dropdowns
    $.each($(".nama_pen"),function(keys,vals) {
        // Name value
        var ThisVal =   $(this).val();
        // If there is selection, store value and name
        if(ThisVal != '-')
            SaveSpot[ThisVal]   =   $(this).prop("name");
    });
    // This is is redundant a bit because it loops again through the same
    // DOM as above, so it could be refined a bit
    $.each($(".nama_pen"), function(key,value) {
        // Loop through each of the options
        $.each($(this).children(), function(subkey,subvalue) {
            // If there is a value saved in the holding object 
            if(SaveSpot[$(this).val()]) {
                    // Get the name of the parent. If name is not this dropdown, disable it
                    if($(this).parent("select").prop("name") != SaveSpot[$(this).val()])
                        $(this).prop("disabled",true);
                    // Alternatively, just keep it selected
                    else
                        $(this).prop("selected",true);
                }
            // Enable by default (incase user backs out of selections, disabled options are enabled 
            else
                $(this).prop("disabled",false);
        });
    });
    // Just to view the holding object.
    console.log(SaveSpot);
});
</script>

我还应该提一下，如果你想加载一个菜单，然后在选择前一个菜单时加载一个新菜单，而不包含先前的选择，你将使用Ajax。此外，不推荐将时间从mysql_切换为PDO或mysqli_作为mysql_函数库。

如何使用相同的选项进行多个选择下拉菜单但不允许每个下拉列表选择相同选项（不重新加载页面）？

1 个答案: