将选定的下拉值从一个选择框复制到另一个答案

【问题标题】：Copy a selected drop down value from one select box to another将选定的下拉值从一个选择框复制到另一个
【发布时间】：2013-01-28 13:05:55
【问题描述】：

简单来说，我有一个表单可以根据 mysql 查询生成选择框。

$i = 0;
while($res= mysql_fetch_assoc($sql2))
echo "  <div class='span1'>";
echo "      <input name='orderNo[$i]' type='text' id='orderNo[$i]' value='$orderNo' class='input-small' onclick='populateorderNo()' />";
echo "  </div>";

echo "  <div class='span1'>";
echo "      <select name='methodOfPay[$i]' id='methodOfPay[$i]' class='input-small' >";
echo "      <option value=''>&nbsp;</option>";
echo "      <option value='On Bill'>On Bill</option>";
echo "      <option value='Customer C.C'>Customer C.C</option>";
echo "      <option value='Company G.C'>Company G.C</option>";
echo "      </select>";
echo "  </div>";
++$i;
}

我要做的是将methodOFPay[0]上的选定选项复制到后续的methodOfPay[]。我可以使用 orderNo 的 onclick 函数来做到这一点，但我不知道如何将相同的理论应用于选择框。这是我的简单文本框副本的 js 代码。目前，它总是将第一行复制到后续行。

var orderno = 0;
function populateorderNo(){
var copyorderNo = document.getElementById('orderNo[0]');
document.getElementById('orderNo[' + orderno + ']').value = copyorderNo.value;
orderno += 1;

}

任何帮助将不胜感激。非常感谢，作为一个新手，我从这个网站和我收到的所有答案中学到了很多东西。

【问题讨论】：

您是否正在尝试使其工作，以便如果用户单击下拉菜单，例如他们单击 On Bill，那么所有下拉菜单都将具有在账单上已选择？
目前的想法是，在 methodOfPay[0] 上选择的任何内容都将复制到另一个 methodOfPay

标签： php jquery forms

【解决方案1】：

如果您使用直接的 JavaScript，您可以使用 onchange。在jQuery中，你可以使用.change()。

直接 JavaScript 方法

PHP

echo "      <select name='methodOfPay[$i]' id='methodOfPay[$i]' class='input-small' onchange='myOnChangeFunction()' >";
 ...
echo "      </select>";

function myOnChangeFunction() {
    // Get value and set other selects
}

jQuery 方法 (jsfiddle)

$('select[id^="methodOfPay"]').change(function() {
    var value = $(this).val();
    $('select[id^="methodOfPay"]').not($(this)).val(value);
});

【讨论】：

【解决方案2】：

为了便于演示，我稍微更改了您的代码，但原理还是一样。

主要要注意的是count($orderNo)在javascript中的使用

这将更好地使用 jQuery 和正则表达式，如 Ruben Infante 的示例所示

<?php

for ($i = 0; $i < 10; ++$i) {
    $orderNo[$i] = $i;
}

?>

<html>
    <head>
        <title>Hello</title>
        <script type="text/javascript">
            function populateorderNo() {
                var copyorderNo = document.getElementById('orderNo[0]');
                for (var i = 0; i < <?php echo count($orderNo); ?>; i++) {
                    document.getElementById("orderNo["+i+"]").value = copyorderNo.value;
                }
            }

            function changeSelectBox() {
                var selectBox = document.getElementById('methodOfPay[0]');
                for (var i = 0; i < <?php echo count($orderNo); ?>; i++) {
                    document.getElementById('methodOfPay['+i+']').value = selectBox.value;
                }
            }
        </script>
    </head>
    <body>
        Hello
        <?php foreach ($orderNo as $r): ?>
            <div class='span1'>
            <input name='orderNo[<?php echo $r;?>]' type='text' id='orderNo[<?php echo $r;?>]' value='<?php echo $r;?>' class='input-small' onchange='populateorderNo();' />
            </div>

            <div class='span1'>
            <select name='methodOfPay[<?php echo $r; ?>]' id='methodOfPay[<?php echo $r;?>]' class='input-small' onchange='changeSelectBox();' >
            <option value=''>&nbsp;</option>
            <option value='On Bill'>On Bill</option>
            <option value='Customer C.C'>Customer C.C</option>
            <option value='Company G.C'>Company G.C</option>
            </select>
            </div>
        <?php endforeach; ?>
    </body>
</html>

【讨论】：