Question

简化，我有一个表单，可以根据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 []。我能够使用forclick函数为orderNo做到这一点，但我无法弄清楚如何将相同的理论应用于选择框。这是我的简单文本框副本的js代码。现在，它总是将第一行复制到后续行。

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

}

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

Answer 1

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

直接JavaScript方法

PHP

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

JS

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

jQuery方法（jsfiddle）

JS

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

Answer 2

为了便于演示，我稍微改变了你的代码，但理论仍然是相同的。

需要注意的主要事项是在javascript中使用 count（$ orderNo）

这可以更好地使用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>

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

2 个答案: