Question

我希望我的用户能够选择他们去远足的人。我使用了JScript，允许用户根据徒步旅行中的人数添加更多选择框。此选择框中的名称是从数据库查询生成的。

我想放置一些可以阻止同一个人从不同选择框中多次被选中的东西。例如，如果在第一个部分框中选择了选项1，则第二个，第三个，第四个.....选择框中的用户不应该可以使用它。

使用以下代码生成选择框

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

允许添加更多选择框的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.");

}

}

我已经找了几个解决方案，虽然它们很好，但是当涉及到MySQL / php时，它们都没有告诉我如何做到这一点。

任何提示，建议或指南都将不胜感激。

Answer 1

如果您不介意使用框架，可以使用w2ui的枚举字段（多选）：

http://w2ui.com/web/docs/form/fields-enum

字段的items数组可以直接从url中提取，也可以是预定义的数组。

它还可以省去创建更多选择框的麻烦，因为您可以在一个字段中选择所有人。

或许您可以使用http://aehlke.github.io/tag-it/

Answer 2

@David请在此处找到我的解决方案 - [http://codepen.io/anon/pen/GqRWQe]

注意：由于此帖子已在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>

如果此解决方案有帮助，请接受此答案。

根据先前的选择隐藏选择框中的选项。从SQL生成的选项

2 个答案: