following jquery doesn't work in chrome while its works in firefox

Question

HTML:

<tr class="txtMult"> 
    <td>2</td> 
    <td>
        <select style="width: 180px;" class="select" id="select2"> 
            <?PHP foreach($results as $row) 
                echo"<option onclick='myAjaxFunction(this);' value=" . $row->itemName .">" . $row->itemName . "</option>"; 
            ?>  
        </select>
    </td> 
    <td><input type='text' class='val1' name="123"></td> 
    <td><input type='text' class='val2' id="2"></td> 
    <td><input type='text' class='multTotal' value='0.00' required></td> 
</tr> 

Javascript:

var d = 1;   
function myAjaxFunction() { 
    var string = $('#select' + d + '').val();

    $.post("http://localhost/online_stock_system/new_cont/add", {
        input: string
    }, function (data) {
        $('#' + d + '').val(data);
        // $('#select'+d+'').attr('disabled','');
        d++;
    });  
}

this code is included in new.js file but it's not working on chrome while it's working on firefox.

Answer 1

You're using onclick on an option tag. This is not a supported event. You can see another answer here for more on that.

If you want the function to trigger when you change the value, just use .change()

$('#select2').on('change', function() {
  myAjaxFunction(this);
});

Or

$('#select2').on('change', function() {
    var string = $('#select' + d + '').val();

    $.post("http://localhost/online_stock_system/new_cont/add", {
        input: string
    }, function (data) {
        $('#' + d + '').val(data);
        d++;
    });  
});