如何使用相同的选项使多个选择下拉，但不允许每个下拉选择相同的选项(无需重新加载页面)

Question

我有一个PHP脚本与多个<select>输入。这些<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_函数库已弃用。