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 =＆＃34; selectpicker with-search form-control＆＃34;无论做出何种选择，都会发布第一个选项的值。 Here is the Debug View这是数据库中的结果

就像我之前说过的那样，我在stackoverflow上看到了类似的问题，但是没有一个对我有帮助，甚至没有回答。

我希望有人可以发现错误或推荐修复。提前致谢

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

`

 <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将不会产生任何影响，为您提供相同的结果＆＃34;

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

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

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

}

使用SelectPicker类动态创建select始终发布第一个opion

1 个答案:

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