Чтобы устранить проблему # 1, одним из вариантов является предварительное присвоение значения параметру «-Select Vehicle Model» перед запуском фильтра, а затем установка его в качестве параметра «selected».
// pre-assign a value to the first option - "Select Vehicle Model"
$("#model option:eq(0)").val(this.value);
// run the filter, which will now include the first option
$model.html($options.filter('[value="' + this.value + '"]'));
// make the first option the selected option
$("#model option:eq(0)").prop("selected",true);
Мое решение для CodePen: https://codepen.io/onegrumpybunny/full/NmjzXb
Для выпуска № 2 вы можете скрыть div, содержащий «модель», выбрать и показать div, содержащий «другое» текстовое поле.
$('#model').on('change', function() {
if ($('#model :selected').text() == '- Other -') {
// uncomment this to hide the "model" select when "other" option is selected
//$('.model-div-not-others').addClass("hide");
$('.model-div-for-others').removeClass("hide");
$('#model-others').removeAttr("disabled");
} else {
$('.model-div-for-others').addClass("hide");
$('#model-others').attr("disabled","disabled");
}
});
Однако, предупреждающее слово, использование текста опции не является наилучшей практикой.Я бы порекомендовал назначить правильное значение для каждого параметра.Затем добавьте значение атрибута данных для каждого параметра и отфильтруйте его (я полагаю, кто-то еще упомянул об этом).Это оставит вас с действительными значениями из вашей формы.
--- edit --- Вот пример вашего приложения с допустимыми значениями, присвоенными каждому параметру, и фильтрацией, выполненной для значения атрибута данных: https://codepen.io/onegrumpybunny/full/wZevjy