Question

I am trying to get the following code to fire once on page load/refresh but it is not working
once the page is loaded the function change works fine.

if I throw an alert in it shows all the input values for every input in the form

$(document).ready(function(e) {         
//attach handler and call once
    $(':input[name$=":finopt:2"]').change(function() {
        var arg = $(this).val();
        $.each(screwHolderArr,function(){
            //alert(screwImgPath+screwColorArr[arg]);
          $('#'+this).css("background-image", "url("+screwImgPath+screwColorArr[arg]+")")
        });

    });

    //trigger change once
    $(':input[name$=":finopt:2"]').trigger('change');
}

here is the select box

<select name="36309:finopt:2" size="1">
                                      <option value="White Standoffs">White Standoffs</option>
                                      <option value="Black Standoffs">Black Standoffs</option>
                                      <option value="Silver Standoffs">Silver Standoffs</option>
                                    </select>

thanks for any help in advance

Answer 1

Try:

$(document).ready(function(e) {  
//assign some id to your select       
//attach handler and call once
    $("select[id='yourSelectId']").change(function() {
        var arg = $(this).val();
        $.each(screwHolderArr,function(){
            //alert(screwImgPath+screwColorArr[arg]);
          $('#'+this).css("background-image", "url("+screwImgPath+screwColorArr[arg]+")")
        });

    });

    //trigger change once
    $("select[id='yourSelectId']").trigger('change');
}