Приведенный ниже код HTML / CSS / Javascript (jQuery) отображает поле выбора #makes. При выборе параметра отображается поле выбора #models с соответствующими параметрами. Поле выбора #makes находится не по центру, а поле выбора #models заполняет пустое пространство, когда оно отображается.
Как оформить форму так, чтобы поле выбора #makes было центрировано, когда это единственный отображаемый элемент формы, но когда отображаются оба поля выбора, они оба центрируются внутри контейнера?
var cars = [
{
"makes" : "Honda",
"models" : ['Accord','CRV','Pilot']
},
{
"makes" :"Toyota",
"models" : ['Prius','Camry','Corolla']
}
];
$(function() {
vehicles = [] ;
for(var i = 0; i < cars.length; i++) {
vehicles[cars[i].makes] = cars[i].models ;
}
var options = '';
for (var i = 0; i < cars.length; i++) {
options += '<option value = "' + cars[i].makes + '">' + cars[i].makes + '</option>';
}
$("#make").html(options); // populate select box with array
$("#make").bind("click", function() {
$("#model").children().remove() ; // clear select box
var options = '';
for (var i = 0; i < vehicles[this.value].length; i++) {
options += '<option value = "' + vehicles[this.value][i] + '">' +
vehicles[this.value][i] +
'</option>';
}
$("#model").html(options); // populate select box with array
$("#models").addClass("show");
}); // bind end
});.hide {
display: none;
}
.show {
display: inline;
}
fieldset {
border: #206ba4 1px solid;
}
fieldset legend {
margin-top: -.4em;
font-size: 20px;
font-weight: bold;
color: #206ba4;
}
fieldset fieldset {
position: relative;
margin-top: 25px;
padding-top: .75em;
background-color: #ebf4fa;
}
body {
margin: 0;
padding: 0;
font-family: Verdana;
font-size: 12px;
text-align: center;
}
#wrapper {
margin: 40px auto 0;
}
#myFieldset {
width: 213px;
}
#area {
margin: 20px;
}
#area select {
width: 75px;
float: left;
}
#area label {
display: block;
font-size: 1.1em;
font-weight: bold;
color: #000;
}
#area #selection {
display: block;
}
#makes {
margin: 5px;
}
#models {
margin: 5px;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id = "wrapper">
<fieldset id = "myFieldset">
<legend>Cars</legend>
<fieldset id = "area">
<label>Select Make:</label>
<div id = "selection">
<div id = "makes">
<select id = "make"size = "2"></select>
</div>
<div class = "hide" id = "models">
<select id = "model" size = "3"></select>
</div>
</div>
</fieldset>
</fieldset>
</div>


![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Перемещение полей выбора изменяет их свойства отображения на «блокировать». Если у вас нет причин размещать их, просто удалите объявление «float: left» и добавьте «text-align: center» в #makes и #models.
Из вашего вопроса не совсем ясно, какой макет вы пытаетесь достичь, но судя по тому факту, что вы применили «float: left» к элементам выбора, похоже, вы хотите, чтобы элементы выбора отображались рядом. В этом случае вы можете добиться этого, выполнив следующие действия:
Поскольку по умолчанию элементы выбора отображаются встроенными, альтернативой последнему шагу является удаление блоков #make и #model и прямое применение классов «показать» и «скрыть» к элементу выбора модели.
спасибо, что нашли время ответить. Хотя мой вопрос был расплывчатым, но вы попали в те области, которые мне нужны для решения проблемы.