logo标签列表

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

phpjqueryforms
3
简单来说，我有一个表单，根据 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 函数实现它，但我无法弄清如何将相同的理论应用于 select 元素。 下面是我用于简单文本框复制的 js 代码。 目前，它总是将第一行复制到后续行。
var orderno = 0;
function populateorderNo(){
var copyorderNo = document.getElementById('orderNo[0]');
document.getElementById('orderNo[' + orderno + ']').value = copyorderNo.value;
orderno += 1;

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

你是否正在尝试让用户点击下拉菜单时，例如他们点击了"On Bill"，那么所有的下拉菜单都会选择"On Bill"？ - mr mojo risin
目前的想法是，无论在methodOfPay [0]上选择什么，都会复制到其他的methodOfPay。 - Renee Cribe
2个回答
3
如果您使用纯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)

JavaScript

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

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

需要注意的主要事项是在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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接