根据选定的复选框值获取下拉列表选项

Question

我有以下代码可以从数据库生成复选框

 < table class="table"> < thead> < /thead> < th> <?php $oaNamesQuery = "SELECT DISTINCT oaName FROM oaDetails"; $oaNamesQueryExecute = mysqli_query($conn, $oaNamesQuery); while($oaNamesQueryRow = mysqli_fetch_array($oaNamesQueryExecute)){ $oaName = $oaNamesQueryRow['oaName']; echo '<div class = "checkbox-group" required style="float:left; margin-right: 25px;"> <input class="checkBoxes" type="checkbox" id="checkBoxArray" name="checkBoxArray[]" value="'.$oaName.'"> '.$oaName.'</div>'; } ?> < /th> < /table>

还有另一个输入框如下，其中输入类型是数字

 <div class="col-sm"> <label for="numberOfShiftPerDay">Number</label> <input type="number" class="form-control" id="numberOfShiftPerDay" name="numberOfShiftPerDay" placeholder="No: " onchange="disablingRoutine()" min="1" max="4"> </div>

示例 UI 如下

当我输入某个数字时，会根据我输入的数字出现一个下拉菜单。 例如：如果键入 1，将使用 jQuery 'OnChange' 出现一个下拉列表，如下所示。 用户界面如下

我需要的

我需要基于用户选择的复选框的下拉菜单选项。 例如：如果用户选择了复选框 X、Y 和 XX，那么这些下拉列表应显示 X、Y 和 XX。 有人可以帮助我如何做到这一点吗？

编辑 1

根据 stackoverflow 成员的建议，在更改例程中添加了 Javascript 函数。 但现在有重复的问题。 在我更改的代码下方

 if ($("#numberOfShiftPerDay").val() == 1) { $.each($("input[name='checkBoxArray[]']:checked"), function() { cval = $(this).val(); $('#oaInShift1').append('<option>' + cval + '</option>') }); } else if ($("#numberOfShiftPerDay").val() == 2) { $.each($("input[name='checkBoxArray[]']:checked"), function() { cval = $(this).val(); $('#oaInShift2').append('<option>' + cval + '</option>') }); } else if ($("#numberOfShiftPerDay").val() == 3) { $.each($("input[name='checkBoxArray[]']:checked"), function() { cval = $(this).val(); $('#oaInShift3').append('<option>' + cval + '</option>') }); } else { $.each($("input[name='checkBoxArray[]']:checked"), function() { cval = $(this).val(); $('#oaInShift4').append('<option>' + cval + '</option>') }); }

Answer 1

您可以获取选定的复选框值并附加到您的onchange函数中的下拉列表中。

尝试这个：

function disablingRoutine()
{
    $.each($("input[name='checkBoxArray[]']:checked"), function(){
        cval = $(this).val();
        $('#dropdownID').append('<option>'+cval+'</option>')

    });    
}

编辑 2

function disablingRoutine()
{
    cdata = '';
    $.each($("input[name='checkBoxArray[]']:checked"), function(){
        cval = $(this).val();
        cdata += '<option>'+cval+'</option>';
    }); 
    $('#dropdownID').html(cdata)   
}