How to make multiple select drop-downs using same options but disallow same-option selection per drop-down (without reloading page)?

问题

I have a PHP script with multiple <select> inputs. The value of these <select> dropdowns are fetched from the same database table.

<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>

Can I make it so that the user can't select the same option in other <select> dropdowns without reloading the page?

回答1:

I'm sure someone with better skillset using jQuery (or javascript in general) can do this better.

Demo: 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>

I should also mention that if you wanted to load one menu, then load a new menu on selection of the previous without the previous selection included, you would use Ajax. Also, time to make the switch from mysql_ to PDO or mysqli_ as the mysql_ function library is deprecated.

来源：https://stackoverflow.com/questions/32534148/how-to-make-multiple-select-drop-downs-using-same-options-but-disallow-same-opti