从下拉列表中克隆自动填充的文本字段答案

【问题标题】：Cloning autopopulated text fields from dropdown从下拉列表中克隆自动填充的文本字段
【发布时间】：2013-07-15 19:42:57
【问题描述】：

首先，在这里完成新手。我一直在努力尝试克隆组合框。我的行话对吗？基本上我想要做的是有一个填充几个字段的下拉列表，然后点击添加按钮并再次执行所有操作。我能够填充第一行字段，但克隆后什么也没有。帮助？提前致谢。

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/reCopy.js"></script>
<script type="text/javascript">
$(function(){
var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';

$('a.add').relCopy({ append: removeLink});
});
</script>
<script type="text/javascript">
    var compInfoArray = new Array();

    <?php
        $query1 = "SELECT * FROM bha_product ORDER BY product";
        $result1 = mysql_query($query1) or die(mysql_error());

        // build javascript array
        while($row1=mysql_fetch_array($result1)){ 
            echo 'compInfoArray['.$row1['productid'].'] = new Array();';
            echo 'compInfoArray['.$row1['productid'].']["product"] = "'.$row1['product'].'";';
            echo 'compInfoArray['.$row1['productid'].']["description"] = "'.$row1['description'].'";';
                        echo 'compInfoArray['.$row1['productid'].']["price"] = "'.$row1['price'].'";';
        }
    ?>

    function showname() {
        var productid = document.form1.productid.value;
        document.form1.product.value = compInfoArray[productid]["product"];
        document.form1.description.value = compInfoArray[productid]["description"];
        document.form1.price.value = compInfoArray[productid]["price"];
    }

    window.onload=function() {
        showname();
    } 

</script>
</head>
<body>
    <form name="form1">  
    <p class="clone">   
             <select name="productid" onchange="showname()">
        <option value="">Select Product</option>
        <?php
            $query1 = "SELECT * FROM bha_product ORDER BY product";
            $result1 = mysql_query($query1) or die(mysql_error());

            // build javascript array
            while($row1=mysql_fetch_array($result1)){ 
                echo '<option value="'.$row1['productid'].'">'.$row1['product'].'</option>';
            }
        ?>
        </select>
        <label>
            <input type="text" name="product" value="" />
            <input type="text" name="description" value="" />
            <input type="text" name="price" value="" />


        </label></p><p><a href="#" class="add" rel=".clone">Add More</a></p>
<input type="submit" value=" Submit " />
    <br>    


    <input name="submit" type="submit" id="submit" value="Add" /> 
    </form>
</body>
</html>

【问题讨论】：

标签： php combobox clone

【解决方案1】：

不优雅，但它有效。

  <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/
    ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="js/reCopy.js"></script>
    <script type="text/javascript">
    $(function(){
    var removeLink = ' <a class="remove" href="#" onclick="$(this).parent().slideUp(function(){ $(this).remove() }); return false">remove</a>';

    $('a.add').relCopy({ append: removeLink});
    });
    </script>
    <script type="text/javascript">
        var compInfoArray = new Array();
        <?php
            $query1 = "SELECT * FROM bha_product ORDER BY product";
            $result1 = mysql_query($query1) or die(mysql_error());

            // build javascript array
            while($row1=mysql_fetch_array($result1)){ 
                echo 'compInfoArray['.$row1['productid'].'] = new Array();';
                echo 'compInfoArray['.$row1['productid'].']["product"] = "'.$row1['product'].'";';
                echo 'compInfoArray['.$row1['productid'].']["description"] = "'.$row1['description'].'";';
                echo 'compInfoArray['.$row1['productid'].']["price"] = "'.$row1['price'].'";';
            }
        ?>

        function showname( place ) {
            var productid = $( place ).val();
            $( place ).next().children('input[name="product"]').val(compInfoArray[productid]["product"]);
            $( place ).next().children('input[name="description"]').val(compInfoArray[productid]["description"]);
            $( place ).next().children('input[name="price"]').val(compInfoArray[productid]["price"]);
        }
        var i = 1;
        function clone(){
            $(".exemple_for_clone").clone().removeClass("exemple_for_clone").addClass("clone" + (i + 1)).appendTo("#clone_input_place");
            i++;
        }
    </script>
    </head>
    <body>
        <form name="form1">
        <div style="display: none;">
            <p class="exemple_for_clone">   
                <select name="productid" onchange="showname(this)">
                <option value="">Select Product</option>
                <?php
                    $query1 = "SELECT * FROM bha_product ORDER BY product";
                    $result1 = mysql_query($query1) or die(mysql_error());

                    // build javascript array
                    while($row1=mysql_fetch_array($result1)){ 
                        echo '<option value="'.$row1['productid'].'">' . $row1['product'] . '</option>';
                    }
                ?>
                </select>
                <label>
                    <input type="text" name="product" value="" />
                    <input type="text" name="description" value="" />
                    <input type="text" name="price" value="" />
                </label>
            </p>
        </div>
        <p class="clone0">   
            <select name="productid" onchange="showname(this)">
            <option value="">Select Product</option>
            <?php
                $query1 = "SELECT * FROM bha_product ORDER BY product";
                $result1 = mysql_query($query1) or die(mysql_error());

                // build javascript array
                while($row1=mysql_fetch_array($result1)){ 
                    echo '<option value="'.$row1['productid'].'">' . $row1['product'] . '</option>';
                }
            ?>
            </select>
            <label>
                <input type="text" name="product" value="" />
                <input type="text" name="description" value="" />
                <input type="text" name="price" value="" />
            </label>
        </p>
        <p id="clone_input_place"></p>
        <p><a href="#" class="add" rel=".clone" onclick="clone()">Add More</a></p>
    <input type="submit" value=" Submit " />
        <br>    


        <input name="submit" type="submit" id="submit" value="Add" /> 
        </form>
    </body>
    </html>

【讨论】：

太棒了，感谢您的快速响应。我会尝试一下。上次我使用任何编码是在 90 年代中期。天哪，我觉得自己老了。
我一定是做错了什么，因为它没有克隆，第一个组合框也没有填充。
还有其他方法可以做到这一点吗？我真正需要做的就是克隆新的组合框，或者至少将我引导到一个体面的教程。我找遍了所有的东西都找不到。
jsbin.com/usamed/1 - 请看这个例子。这是您需要的，还是我没有正确理解您的要求？
我显然搞砸了。再次感谢。