[英]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. 我有一个包含多个
<select>
输入的PHP脚本。 The value of these <select>
dropdowns are fetched from the same database table. 这些
<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> </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? 我可以这样做,以便用户在不重新加载页面的情况下无法在其他
<select>
下拉列表中选择相同的选项吗?
I'm sure someone with better skillset using jQuery (or javascript in general) can do this better. 我确定使用jQuery(或一般而言javascript)具有更好技能的人可以做得更好。
Demo: http://jsfiddle.net/brebk342/ 演示: 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. 我还应该提到,如果要加载一个菜单,然后在不包含先前选择的情况下在先前选择中加载新菜单,则可以使用Ajax。 Also, time to make the switch from
mysql_
to PDO
or mysqli_
as the mysql_
function library is deprecated. 另外,不建议使用将
mysql_
函数库从mysql_
切换到PDO
或mysqli_
的mysql_
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.