Question

昨天，我正在设计一个平台，使用下拉列表输入产品及其数量，但我必须使用按钮生成它们，所以我不得不使用javascript。它工作正常，但是在发送数据时，只需要生成最后一个Select，然后是代码和结果。

    <form id="pedido" name="pedido" action="funciones/pedido.php" method="post" >

<table name="pedidos" class="table table-bordered table-hover" id="myTable">
                                 <thead>
                                    <tr>
                                        <th>Producto</th>
                                        <th>Cantidad</th>
                                    </tr>
                                </thead>

</table>
<br>


</form>
<center>
<button class="btn btn-sm btn-primary"  onclick="myCreateFunction()">Agregar Producto</button>
<button class="btn btn-sm btn-danger" onclick="myDeleteFunction()">Eliminar Producto</button>
<button class="btn btn-sm btn-success"  form="pedido" type="submit">Guardar</button></center>
<br>

和Javascript

<script>
function myCreateFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(1);
    var cell = row.insertCell(0);

    <? $sql="select * from productodist where  rut_dist='".$_GET['id']."';";
$resultado=mysql_query($sql);
$x=0;?>
    var element = document.createElement("select");
 <? while($datos=mysql_fetch_array($resultado)){
     $x++?>
    var option<? echo $x; ?> = document.createElement("option");
    option<? echo $x; ?> .innerHTML = "<? echo  $datos['Descripcion'] ?>";
    option<? echo $x; ?>.value = "<? echo  $datos['CodArticulo'] ?>";
    element.add(option<? echo $x; ?>, null);
    element.name = "producto<? echo $x; ?>";


    <?
 }
    ?>
    cell.appendChild(element);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("select");
    //element2.type = "select"

    <?  for ($y=1;$y<=100;$y++){
        ?>    var option<? echo $y; ?> = document.createElement("option");
    option<? echo $y; ?>.innerHTML = "<? echo $y; ?>";
    option<? echo $y; ?>.value = "<? echo $y; ?>";
    element2.add(option<? echo $y; ?>, null);
    element2.name = "cantidad<? echo $x; ?>";
    <?  }?>
    cell2.appendChild(element2);
}

function myDeleteFunction() {
    document.getElementById("myTable").deleteRow(1);
}
</script>

然后当我发送它时，帖子阵列让我知道了。

Array ( [producto30] => 20008 [cantidad30] => 1 )

我做错了什么？提前谢谢你！

Answer 1

您需要设置选项的属性，因此表单可以读取必须发送的值。如果要发送多一个值，则必须将属性选择设置为多个，并将要发送值的选项值标记为选中。

/ *标记您选择的选项* /

option.setAttribute('selected', true);

/ 添加attr multiple以使select可以选择多个值。 /

element2.setAttribute(multiple, "multiple");

我希望这有帮助。

您的选择名称相同，因此表单将替换所有并获取最后一个选择。你可以在这里看到 name of select same

因此，您需要在select中添加类以使其易于计算。

/*we add attr class*/
element.setAttribute(class, "element");
element2.setAttribute(class, "element2");

/*here we count created select*/
    var x = $(".element").length;

因为元素1和2的长度相同，所以我们不需要计算元素2 并设置元素的名称，如。

  element.name = "producto"+x;
  element2.name = "cantidad"+x;

这是最终的功能。

function myCreateFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(1);
    var cell = row.insertCell(0);
    var x = parseFloat($(".element").length); /*this  for count length of class element*/

    <? $sql="select * from productodist where  rut_dist='".$_GET['id']."';";
        $resultado=mysql_query($sql);
        $x=0;
    ?>
    var element = document.createElement("select");
    element.setAttribute("Class","element"); /*this will be add class element into input select1 */
    <? 
        while($datos=mysql_fetch_array($resultado)){
        $x++;
     ?>

        var option<? echo $x; ?>        = document.createElement("option");
        option<? echo $x; ?> .innerHTML = "<? echo  $datos['Descripcion'] ?>";
        option<? echo $x; ?>.value      = "<? echo  $datos['CodArticulo'] ?>";
        element.add(option<? echo $x; ?>, null);
    <?
        }
    ?>

    element.name                    = "producto"+(x+1); /*i move outside looping so it's just set once and set name element +length of select has been create + 1*/
    cell.appendChild(element);

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("select");
    element2.setAttribute("Class","element"); /*this will be add class element into input select2 */
    //element2.type = "select"

    <?  
    for ($y=1;$y<=100;$y++){
    ?>    
        var option<? echo $y; ?>       = document.createElement("option");
        option<? echo $y; ?>.innerHTML = "<? echo $y; ?>";
        option<? echo $y; ?>.value     = "<? echo $y; ?>";
        element2.add(option<? echo $y; ?>, null);

    <?  
    }
    ?>

    element2.name                  = "cantidad"+(x+1);
    element.name                    = "producto"+(x+1); /*i move outside looping so it's just set once and set name element2 + length of select has been create + 1*/
    cell2.appendChild(element2);
}

让我知道它的工作与否。

Answer 2

以下是使用PHP生成HTML选择选项的方法。

将它放在php脚本的顶部。

<?php
$sql="select * from productodist where  rut_dist='".$_GET['id']."';";
$resultado=mysql_query($sql);
$datos=mysql_fetch_array($resultado);

$selectProducts = '';
$selectProducts .= '<select name="producto">'; // maybe add multiple attribute if you need multiple values sent
foreach($datos as $dato) {
    $selectProducts .= '<option value="'.$dato['CodArticulo'].'">'.$dato['Descripcion'].'</option>';
}
$selectProducts .= '</select>';
?>

然后在HTML中的任何位置都可以显示选择：

<?php echo $selectProducts; ?>

在Javascript中删除PHP混合。这真的不是这样做的方式......

注意：不推荐使用<?而不是<?php，并且可能导致错误，导致您的应用无法在较新的PHP版本上运行。

如何正确生成PHP的HTML选择选项？

2 个答案: