Question

###########Update

Here is the original code that worked in ie7 but not in 9. I updated and thought both were ok.

if(max_ch>0){
var newDiv = $('<div>Room '+(i+1)+
    ' <select class="adu" name="data[Rate]['+r_id+']['+ro_id+
    '][adults][]"></select> adults. <select class="chi" name="data[Rate]['+r_id+
    ']['+ro_id+'][children][]"></select> children.</div>'
);
newDiv.attr("id","occupants"+i).appendTo(showdiv+' .rooms_adults');

var roomPrice = $('<input type="hidden" name="data[Rate]['+r_id+']['+ro_id+'][prices][]" value="'+room_bo+'" />');
roomPrice.attr("id","roomprice"+i).appendTo(showdiv+' .rooms_adults');

var num_opts = Number(max_ad) + 1,
    slc_adu = $(showdiv+' #occupants'+i+' select.adu');
for( ad=0; ad < num_opts; ad++){
    slc_adu.append("<option value=\"" + ad + "\">" + ad + "</option>");
}

var num_opts = Number(max_ch) + 1,
    slc_ch = $(showdiv+' #occupants'+i+' select.chi');
for( ch=0; ch < num_opts; ch++){
    slc_ch.append("<option value=\"" + ch + "\">" + ch + "</option>");
}

$(showdiv+' #occupants'+i+' select.adu').val('1');                  

}

I have some jquery to build drop-down boxes. I want the drop-downs to have the first value already selected in them. This happens on all browser except ie9.

It has a blank record as the first value.

            $('.rooms_select select' ).change(function(){

                var showdiv = '#div_'+$(this).attr('id');
                var r_id    = $(showdiv+' .rate_data').val();
                var ro_id   = $(showdiv+' .room_data').val();
                var min_ad  = $(showdiv+' .room_data').attr('minadults');                   
                var max_ad  = $(showdiv+' .room_data').attr('maxadults');
                var max_ch  = $(showdiv+' .room_data').attr('maxchildren');
                var total_price = $(showdiv+' .rate_data').attr('total_price');
                var price_quote = $(showdiv+' .rate_data').attr('rel');
                var rooms = $(this).val();
                var room_bo = 0;

                //$(showdiv+' .room_data').attr('numrooms', rooms);

                room_price = calc_rprice(showdiv,total_price,price_quote,rooms);
                // NEW THING
                room_bo = Number(room_price/rooms);

                $(showdiv).slideDown("slow");
                $(showdiv+' .rooms_adults').html('<span>Please select number of occupants.</span>');
                for( i=0; i < rooms; i++){

                    if(max_ch>0){
                        var newDiv = $('<div>Room '+(i+1)+' <select class="adu" name="data[Rate]['+r_id+']['+ro_id+'][adults][]"></select> adults. <select class="chi" name="data[Rate]['+r_id+']['+ro_id+'][children][]"></select> children.</div>');
                        newDiv.attr("id","occupants"+i).appendTo(showdiv+' .rooms_adults');

                        var roomPrice = $('<input type="hidden" name="data[Rate]['+r_id+']['+ro_id+'][prices][]" value="'+room_bo+'" />');
                        roomPrice.attr("id","roomprice"+i).appendTo(showdiv+' .rooms_adults');

                        var roomTotalPrice = $('<input type="hidden" name="data[Rate]['+r_id+']['+ro_id+'][roomTotalPrice][]" value="'+room_price+'" />');
                        roomTotalPrice.attr("id","roomTotalPrice"+i).appendTo(showdiv+' .rooms_adults');

                        var num_opts = Number(max_ad) + 1,
                            slc_adu = $(showdiv+' #occupants'+i+' select.adu');
                        for( ad=min_ad; ad < num_opts; ad++){
                            slc_adu.append("<option value=\"" + ad + "\">" + ad + "</option>");
                        }

                        var num_opts = Number(max_ch) + 1,
                            slc_ch = $(showdiv+' #occupants'+i+' select.chi');
                        for( ch=0; ch < num_opts; ch++){
                            slc_ch.append("<option value=\"" + ch + "\">" + ch + "</option>");
                        }

                        $(showdiv+' #occupants'+i+' select.adu').val('1');
                        $("select :first-child").each(function () {
                            $(this).attr("selected", true);
                        });

                    } else {
                        var newDiv = $('<div>Room '+(i+1)+' <select class="adu" name="data[Rate]['+r_id+']['+ro_id+'][adults][]"></select> adults.</div>');         
                        newDiv.attr("id","occupants"+i).appendTo(showdiv+' .rooms_adults');

                        var roomPrice = $('<input type="hidden" name="data[Rate]['+r_id+']['+ro_id+'][prices][]" value="'+room_bo+'" />');
                        roomPrice.attr("id","roomprice"+i).appendTo(showdiv+' .rooms_adults');

                        var roomTotalPrice = $('<input type="hidden" name="data[Rate]['+r_id+']['+ro_id+'][roomTotalPrice][]" value="'+room_price+'" />');
                        roomTotalPrice.attr("id","roomTotalPrice"+i).appendTo(showdiv+' .rooms_adults');

                        var num_opts = Number(max_ad) + 1,
                            slc_adu = $(showdiv+' #occupants'+i+' select.adu');
                        for( ad=min_ad; ad < num_opts; ad++){
                            slc_adu.append("<option value=\"" + ad + "\">" + ad + "</option>");
                        }
                        $(showdiv+' #occupants'+i+' select.adu').val('1');
                        $("select :first-child").each(function () {
                            $(this).attr("selected", true);
                        });


                    }

                calc_rprice(showdiv,total_price,price_quote,rooms);


            });

Answer 1

I’m loathe to facilitate the continued use of JS like this, but try something like:

$("select :first-child").each(function () {
    $(this).attr("selected", true);
});

Edit: I want to reinforce that this model is an abuse of JavaScript. You may think that you’ve secured your website effectively, but I promise you that security on the web is an illusion, and using JavaScript like this makes your site an easy target.

You really need to move far, far away from creating your HTML inside of JavaScript. If you absolutely have to have some form of asynchronous page modifications, you should really be using something like AJAX and securing your code elsewhere. You are giving away unneccessary information by exposing this kind of logic to the end-user.