如何使用相同的选项进行多个选择下拉菜单，但不允许每个下拉菜单选择相同的选项(没有重新加载页面)? [英] How to make multiple select drop-downs using same options but disallow same-option selection per drop-down (without reloading page)?

问题描述

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

 < tr>< td>< div align ="right"> Nama Penguji</div></td>< td>:</td>< td><选择name ="nama_penguji" id ="nama_penguji">< option value =-"> ------------ Penguji -----------</option><?php$ myslq3 ="SELECT * FROM penguji ORDER BY id";$ myqry3 = mysql_query($ myslq3)或死("Gagal Query" .mysql_error());而($ mydata3 = mysql_fetch_array($ myqry3)){回声<选项值='$ mydata3 [nama_penguji]'> $ mydata3 [nama_penguji]</option>;}?></select></td></tr>< tr>< td>< div align ="right"></div></td>< td></td>< td><选择名称="nama_penguji2" id ="nama_penguji2">< option value =-"> ------------ Penguji -----------</option><?php$ myslq3 ="SELECT * FROM penguji ORDER BY id";$ myqry3 = mysql_query($ myslq3)或死("Gagal Query" .mysql_error());而($ mydata3 = mysql_fetch_array($ myqry3)){回声<选项值='$ mydata3 [nama_penguji]'> $ mydata3 [nama_penguji]</option>;}?></select></td></tr>< tr>< td>< div align ="right"></div></td>< td></td>< td><选择name ="nama_penguji3" id ="nama_penguji3">< option value =-"> ------------ Penguji -----------</option><?php$ myslq3 ="SELECT * FROM penguji ORDER BY id";$ myqry3 = mysql_query($ myslq3)或死("Gagal Query" .mysql_error());而($ mydata3 = mysql_fetch_array($ myqry3)){回声<选项值='$ mydata3 [nama_penguji]'> $ mydata3 [nama_penguji]</option>;}?></select></td></tr> 

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

解决方案

我确信使用jQuery(或一般而言javascript)具有更好技能的人可以做得更好.

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

 <?php//好像您查询了3次相同的内容，您只需查询一次并保存结果$ myslq3 ="SELECT * FROM penguji ORDER BY id";$ myqry3 = mysql_query($ myslq3)或死("Gagal Query" .mysql_error());而($ 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><选择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></td>< td><选择名称="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></td>< td><选择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>//使用此类名称更改下拉菜单时$(.nama_pen").change(function(){//分配一个保存对象var SaveSpot = {};//遍历同名下拉列表$ .each($(.nama_pen")，function(keys，vals){//名称值var ThisVal = $(this).val();//如果有选择，则存储值和名称if(ThisVal！='-')SaveSpot [ThisVal] = $(this).prop("name");});//这有点多余，因为它再次循环通过相同的对象//像上面的DOM，因此可以对其进行改进$ .each($(.nama_pen")，function(key，value){//遍历每个选项$ .each($(this).children()，function(subkey，subvalue){//如果保存对象中保存了一个值if(SaveSpot [$(this).val()]){//获取父母的名字.如果名称不是此下拉列表，请禁用它if($(this).parent("select").prop("name")！= SaveSpot [$(this).val()])$(this).prop("disabled"，true);//或者，只需保持选中状态别的$(this).prop("selected"，true);}//默认情况下启用(如果用户退出选择，则启用禁用的选项别的$(this).prop("disabled"，false);});});//仅查看持有对象.console.log(SaveSpot);});</script> 

我还应该提到，如果您想加载一个菜单，然后在不包含先前选择的情况下在先前选择中加载新菜单，则可以使用Ajax.另外，不建议使用将 mysql _ 函数库从 mysql _ 切换到 PDO 或 mysqli _ 的时间./p>

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?

解决方案

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.

这篇关于如何使用相同的选项进行多个选择下拉菜单，但不允许每个下拉菜单选择相同的选项(没有重新加载页面)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！