如何使用相同的选项进行多个选择下拉菜单,但不允许每个下拉菜单选择相同的选项(没有重新加载页面)? [英] 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> </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> </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> </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> </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屋!