使用 SelectPicker 类动态创建的选择始终发布第一个选项

Question

我一直在 stackoverflow 周围寻找解决我的 selectpicker 问题的方法，但没有记录类似的情况。我的情况完全不同，所以我不得不问这个问题。

我有一个带有按钮的表单，可以动态地将新行添加到表单中，并为每个新创建的选择输入分配一个 ID。

实现这个的javascript是

function addRow(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;
        var rolCount = table.rows.length;

        for (var j = 0; j < rolCount; j++) {
            row.setAttribute("id", j);
        }
        for (var i = 0; i < colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            //newline = table.rows[0].cells[i].childNodes[0].childNodes[0];
            //alert(newcell.childNodes[0].type);
            switch (newcell.childNodes[0].type) {
                case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    newcell.childNodes[0].id = "select" + rowCount;

                    break;
            }
            //row.setAttribute("id", i);
        }
        $(select).selectpicker('refresh');

    } else {
        alert("Maximum Drug per patient is 10");
    }
}

View Result Here这段代码运行良好，它创建了一个包含新输入元素的新行。这是被复制/克隆的行的代码。

<TD>
    <input type="checkbox" name="chk[]" checked="checked" />
</TD>
<TD>
    <select name="drugs[]" class="selectpicker with-search form-control drugs" data-live-search="true">
                <?php echo $drug_options; ?>
    </select>
</TD>
<TD>
    <select name="qty[]" class="selectpicker with-search form-control">
        <option>Qty</option>
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
</TD>
<td>
    <select name="dosage[]" class="selectpicker with-search form-control" data-live-search="true">
            <?php echo $dosage_options; ?>
     </select>
</td>
<td>
    <select name="duration[]" class="selectpicker with-search form-control" data-live-search="true">
              <?php echo $duration_options; ?>
    </select>
</td>

但是，当我提交表单时，所有带有 class="selectpicker with-search form-control" 的选择菜单都会发布第一个选项的值，而不考虑所做的选择。 Here is the Debug View 这是数据库中的结果

就像我之前所说的，我在 stackoverflow 上看到过类似的问题，但没有一个对我有帮助，即使是已回答的问题。

我希望有人可以发现错误或提出修复建议。提前致谢

仅作记录，这是仅用于 selectpicker 的检查 html 的输出

`

 <div class="btn-group bootstrap-select with-search form-control drugs">            

 <button type="button" class="btn dropdown-toggle btn-default" data-  toggle="dropdown" title="Aciclovir 100mg (11 )">
 <span class="filter-option pull-left">Aciclovir 100mg (11 )</span>
 &nbsp;
 <span class="bs-caret">
 <span class="caret"></span>
 </span>
 </button>
 <div class="dropdown-menu open">
 <div class="bs-searchbox">
 <input class="form-control" autocomplete="off" type="text">
 </div>

 <ul class="dropdown-menu inner" role="menu">

 <li data-original-index="0" class="selected">
 <a tabindex="0" class="" style="" data-tokens="null">
 <span class="text">Aciclovir 100mg (11 )</span><span class="glyphicon glyphicon-ok check-mark"></span></a>
 </li>

 <li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Paracetamol 100mg (Emzor) (12 )</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>
 <li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Paracetamol 250mg (Emzor) (13 )</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>

 <li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Paracetamol 500mg (Emzor) (14 )</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>

 <li data-original-index="4"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Paracetamol 500mg (Pfizer) (15 )</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li>

 </ul>
 </div>

 <select name="drugs[]" class="selectpicker with-search form-control drugs" data-live-search="true" tabindex="-98">
                <option value="Aciclovir 100mg">Aciclovir 100mg (11 )</option>
 <option value="Paracetamol 100mg (Emzor)">Paracetamol 100mg (Emzor) (12 )</option>
 <option value="Paracetamol 250mg (Emzor)">Paracetamol 250mg (Emzor) (13 )</option>
 <option value="Paracetamol 500mg (Emzor)">Paracetamol 500mg (Emzor) (14 )</option>
 <option value="Paracetamol 500mg (Pfizer)">Paracetamol 500mg (Pfizer) (15 )</option>
                </select></div>`

Answer 1

从您发布的内容很难全面了解，但我相信这可能是一个解决方案

如果您使用 JavaScript 创建这些额外字段，则使用 PHP 填充选项将不起作用，因为 PHP 是服务器端脚本并且之前加载。

一旦页面加载完毕，PHP 就完成了它的工作，不能再次调用，因此通过创建新元素，php 不会有任何效果，给你“相同的结果”

我的解决方案是使用HttpXML（javascript 也称为 ajax）来动态加载所有需要的新数据。由于这将要求尚未加载的页面解析数据，因此您将获得更新版本。

或者，您可以使用从药物类型中选择的内容，将其作为multi-phase form 发布到另一个页面（或 php 值为

的同一页面）

if(isset($_POST['drug']) && $_POST['drugs'] == 'paracetemol')){
$options = ...

}