Блог

У меня есть вопрос типа формы, в котором в Qualtrics есть выпадающий список. Я использовал приведенный ниже код для настройки выпадающего списка, и текстовые поля имеют разные размеры. Я хочу, чтобы в моей форме отображались все текстовые поля одинакового размера.

Кто-нибудь может помочь мне с кодом.. где настроить размер текстового поля в приведенном ниже коде?

 var that=this.questionId;
var element="<select id='s1'><option ></option><option value='1'>Aerospace and Defense</option><option value='2'>Automotive</option><option value='3'>Banking and Capital Markets</option><option value='4'>Consumer and Retail</option><option value='5'>Energy, Utilities, Oil and Gas</option><option value='6'>Healthcare</option><option value='7'>Insurance</option><option value='8'>Life Sciences</option><option value='9'>Manufacturing</option><option value='10'>Public Sector</option><option value='11'>Technology, Media and Telecommunications</option><option value='12'>Travel, Transportation and Hospitality</option><option value='13'>Life Sciences</option><option value='14'>Other</option></select>";
jQuery(element).insertAfter("#" that " .InputText:eq(0)");
var element="<select id='s1'><option ></option><option value='1'>Less than 100</option><option value='2'>101-999</option><option value='3'>1,000-10,000</option><option value='4'>10,000-100,000</option><option value='5'>More than 100,000</option><option value='6'>Unknown</option></select>";
jQuery(element).insertAfter("#" that " .InputText:eq(2)");
var element="<select id='s2'><option ></option><option value='1'>Less than 50</option><option value='2'>50-249</option><option value='3'>250-999</option><option value='4'>More than 1000</option><option value='5'>Unknown</option></select>";
jQuery(element).insertAfter("#" that " .InputText:eq(3)");
 var element="<select id='s3'><option ></option><option value='1'>Less than 5 million</option><option value='2'>5-10 million</option><option value='3'>10-1 billion</option><option value='4'>More than 1 billion</option><option value='5'>Prefer not to say</option></select>";
jQuery(element).insertAfter("#" that " .InputText:eq(4)");
jQuery("#" that " .InputText:eq(0)").hide();
jQuery("#" that " .InputText:eq(2)").hide();
jQuery("#" that " .InputText:eq(3)").hide();
jQuery("#" that " .InputText:eq(4)").hide();

    jQuery("#" that " .InputText:eq(0)").val(jQuery("#s1 option:selected").text()); 
    jQuery("#" that " .InputText:eq(2)").val(jQuery("#s2 option:selected").text());
    jQuery("#" that " .InputText:eq(3)").val(jQuery("#s3 option:selected").text());
    jQuery("#" that " .InputText:eq(4)").val(jQuery("#s4 option:selected").text());
    
jQuery("#s1").on('change',function(){
    jQuery("#" that " .InputText:eq(0)").val(jQuery("#s1 option:selected").text());
});

jQuery("#s1").on('change',function(){
    jQuery("#" that " .InputText:eq(2)").val(jQuery("#s2 option:selected").text());
});

    jQuery("#s2").on('change',function(){
    jQuery("#" that " .InputText:eq(3)").val(jQuery("#s3 option:selected").text());
});

  jQuery("#s3").on('change',function(){
    jQuery("#" that " .InputText:eq(4)").val(jQuery("#s4 option:selected").text());
});
 

});введите описание изображения здесь

Попробуйте добавить стили ниже для вашего поля выбора, это должно помочь вам

     <style>
    select{
        width: <desired_width>;
        height: <desired_height>;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
</style>