根据先前的选择,在 select 框中隐藏选项。 SQL 生成的选项
Hide option in a select box dependant on previous choices. Options generated from SQL
我希望我的用户能够 select 与他们一起远足的人。我使用了 JScript,它允许用户根据参加徒步旅行的人数添加更多选择框。此 selection 框中的名称是根据数据库查询生成的。
我想放置一些东西来阻止同一个人从不同的 select 离子盒中被多次 selected。例如,如果第一个部分框中 selected 中的选项 1,则不应在第二、第三、第四......selection 框中对用户可用。
select离子盒使用以下代码生成
<TABLE id="buddyTable" class="form" border="1">
<TR>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<TD><label>Buddy</label>
<select name="buddy[]">
<option>Solo</option>
<?php
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo '<option value = "'.$row["idPerson"].'">'.$row["Forename"]. ' '.$row["Surname"].'</option>';
//echo "name: " .$row["Forename"]. " " . $row["Surname"]. "<br>";
}
}
else {
echo "0 results";
}
$conn->close();
?>
</select>
</TD>
</TR>
</TABLE>
允许添加更多 selection boxes 的 JScript 在这里
function addRowBuddy(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 10){ // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}else{
alert("Maximum number of buddies is 10.");
}
}
我已经寻找了一些解决方案,虽然它们都很好,但其中 none 告诉我如何在涉及 MySQL/php 时执行此操作。
如有任何提示、建议或指南,我们将不胜感激。
如果你不介意使用框架,你可以使用 w2ui 的枚举字段 (Multi Select):
http://w2ui.com/web/docs/form/fields-enum
字段的项目数组可以直接从 url 中提取,也可以是预定义的数组。
它还可以让您省去创建更多 select 离子盒的麻烦,因为您可以 select 一个领域的所有人。
或者您可以使用 http://aehlke.github.io/tag-it/
@David 请在这里找到我的解决方案 - [http://codepen.io/anon/pen/GqRWQe]
注意:因为这个post已经被标记在jQuery下,所以我使用了jQuery 1.10.
<html>
<body>
<TABLE id="buddyTable" class="form" border="1">
<TR>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<TD><label>Buddy</label>
<select name="buddy[]" class="buddies">
<option class="default">Select</option>
<option value="solo">Solo</option>
<option value="user1">user1</option>
<option value="user2">user2</option>
<option value="user3">user3</option>
<option value="user4">user4</option>
</select>
</TD>
</TR>
</TABLE>
<button type="button" onclick="addRowBuddy('buddyTable');">Add Buddy</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script>
var selectedPersons = [];
// add rows copied first row as reference
function addRowBuddy(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 10){ // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}else{
alert("Maximum number of buddies is 10.");
}
$(row).find('.buddies').change();
}
// disable other buddies from getting selected
function disableAlreadySelectedUsers(tableID) {
var otherOptions = 'option[value="'+selectedPersons.join('"],option[value="')+'"]';
$('.buddies').each(function() {
var thisVal = $(this).val();
$(this).find('option').not(otherOptions).removeAttr('disabled');
$(this).find(otherOptions).not('option[value="'+thisVal+'"]').attr('disabled', 'disabled');
});
}
// lets get all the buddies selected from all the select boxes available
function getSelectedValues() {
selectedPersons = [];
$('.buddies').each(function() {
if(($(this).val()).toLowerCase() != 'select') {
selectedPersons.push($(this).val());
}
});
}
// updates the selection on every select box change
$('#buddyTable').on('change', '.buddies', function() {
getSelectedValues();
disableAlreadySelectedUsers('buddyTable');
});
</script>
</body>
</html>
如果此解决方案有帮助,请采纳此答案。
我希望我的用户能够 select 与他们一起远足的人。我使用了 JScript,它允许用户根据参加徒步旅行的人数添加更多选择框。此 selection 框中的名称是根据数据库查询生成的。
我想放置一些东西来阻止同一个人从不同的 select 离子盒中被多次 selected。例如,如果第一个部分框中 selected 中的选项 1,则不应在第二、第三、第四......selection 框中对用户可用。
select离子盒使用以下代码生成
<TABLE id="buddyTable" class="form" border="1">
<TR>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<TD><label>Buddy</label>
<select name="buddy[]">
<option>Solo</option>
<?php
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
echo '<option value = "'.$row["idPerson"].'">'.$row["Forename"]. ' '.$row["Surname"].'</option>';
//echo "name: " .$row["Forename"]. " " . $row["Surname"]. "<br>";
}
}
else {
echo "0 results";
}
$conn->close();
?>
</select>
</TD>
</TR>
</TABLE>
允许添加更多 selection boxes 的 JScript 在这里
function addRowBuddy(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 10){ // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}else{
alert("Maximum number of buddies is 10.");
}
}
我已经寻找了一些解决方案,虽然它们都很好,但其中 none 告诉我如何在涉及 MySQL/php 时执行此操作。
如有任何提示、建议或指南,我们将不胜感激。
如果你不介意使用框架,你可以使用 w2ui 的枚举字段 (Multi Select):
http://w2ui.com/web/docs/form/fields-enum
字段的项目数组可以直接从 url 中提取,也可以是预定义的数组。
它还可以让您省去创建更多 select 离子盒的麻烦,因为您可以 select 一个领域的所有人。
或者您可以使用 http://aehlke.github.io/tag-it/
@David 请在这里找到我的解决方案 - [http://codepen.io/anon/pen/GqRWQe]
注意:因为这个post已经被标记在jQuery下,所以我使用了jQuery 1.10.
<html>
<body>
<TABLE id="buddyTable" class="form" border="1">
<TR>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<TD><label>Buddy</label>
<select name="buddy[]" class="buddies">
<option class="default">Select</option>
<option value="solo">Solo</option>
<option value="user1">user1</option>
<option value="user2">user2</option>
<option value="user3">user3</option>
<option value="user4">user4</option>
</select>
</TD>
</TR>
</TABLE>
<button type="button" onclick="addRowBuddy('buddyTable');">Add Buddy</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.0/jquery.js"></script>
<script>
var selectedPersons = [];
// add rows copied first row as reference
function addRowBuddy(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
if(rowCount < 10){ // limit the user from creating fields more than your limits
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
}
}else{
alert("Maximum number of buddies is 10.");
}
$(row).find('.buddies').change();
}
// disable other buddies from getting selected
function disableAlreadySelectedUsers(tableID) {
var otherOptions = 'option[value="'+selectedPersons.join('"],option[value="')+'"]';
$('.buddies').each(function() {
var thisVal = $(this).val();
$(this).find('option').not(otherOptions).removeAttr('disabled');
$(this).find(otherOptions).not('option[value="'+thisVal+'"]').attr('disabled', 'disabled');
});
}
// lets get all the buddies selected from all the select boxes available
function getSelectedValues() {
selectedPersons = [];
$('.buddies').each(function() {
if(($(this).val()).toLowerCase() != 'select') {
selectedPersons.push($(this).val());
}
});
}
// updates the selection on every select box change
$('#buddyTable').on('change', '.buddies', function() {
getSelectedValues();
disableAlreadySelectedUsers('buddyTable');
});
</script>
</body>
</html>
如果此解决方案有帮助,请采纳此答案。