Question

Simplified, I have a form that generate select boxes based on a mysql query.

$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;
}

What I am trying to do is copy the selected option on methodOFPay[0] to the succeeding methodOfPay[]’s. I was able to do it using an onclick function for orderNo, but I can’t figure out how to apply the same theory to a select box. Here is my js code for the simple text box copy. For now, it’s always going to be the first row copying to the succeeding rows.

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

}

Any help would be appreciated. Thank you very much, as a newbie, I am learning a lot from this site and all the answers I have received.

Answer 1

If you are using straight JavaScript you can use onchange. In jQuery, you can use .change().

Straight JavaScript Method

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 Method (jsfiddle)

JS

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