Question

###########更新

这是在ie7中工作但不在9中的原始代码。我更新并认为两者都没问题。

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');

}

我有一些jquery来构建下拉框。我希望下拉列表中已经选择了第一个值。除了ie9之外，所有浏览器都会发生这种情况。

它有一个空白记录作为第一个值。

            $('.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

我不喜欢像这样继续使用JS，但尝试类似：

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

编辑：我想强调一下这个模型是滥用JavaScript。您可能认为您已经有效地保护了您的网站，但我保证网络上的安全性是一种幻觉，使用这样的JavaScript可以使您的网站成为一个简单的目标。

你真的需要远离在JavaScript中创建HTML。如果您必须进行某种形式的异步页面修改，那么您应该使用类似AJAX的东西并在其他地方保护您的代码。您通过向最终用户公开这种逻辑来泄露不必要的信息。

Answer 2

您是否尝试过将某个选项标记为“已选择”？

这是一个很好的例子： http://www.willstrohl.com/Blog/EntryId/302/jQuery-Change-the-Default-Option-in-a-Select-Listbox

ie9下拉列表未设置为第一个值

2 个答案: