Здравствуйте!
Подскажите, пожалуйста, мне глупому как решить проблему - пытаюсь стилизовать select'ы, последующий из которых становится активен и наполняется данными после того как сделан выбор в предыдущем. Использую
JQuery Form Styler с сайта dimox.
Проблема: стилизованный select остаётся неактивен и не обновляется. Пробовал задать задержку стилизации - если успеваю сделать выбор в первом select'е - второй обновляется, после стилизуется и всё работает. Но если после этого поменять значение в первом select'е - на втором это уже не отразится.
Также пробовал добавлять .trigger('refresh'); но толи я неправильно это делаю, толи не помогает. :(
Короче, код:
<form id="ymm-form" action="index.php?route=module/ymmfilter/setymm" method="POST">
<div class="ymm-make">
//первый select, в нём выбирается марка автомобиля
<!-- <label for="make"><?php echo $text_make; ?></label> --!>
<select name="make" id="ymmmake">
<option value=""><?php echo $text_please_select_make; ?></option>
<?php foreach ($makes as $make) { ?>
<option value="<?php echo $make['id']; ?>"><?php echo $make['make']; ?></option>
<?php } ?>
<script>
(function($) {
$(function() {
$('#ymmmake').styler();
$('#ymmmake',select).trigger('#ymmmodel','refresh');
});
})(jQuery);
</script>
</select>
</div>
<?php if($this->config->get('ymmfilter_model')) { ?>
<div class="ymm-model">
//второй select, в нём должны подгрузиться модели, соответствующие марке, но этого не происходит если он уже стилизован
<!-- <label for="model"><?php echo $text_model; ?></label> --!>
<select id="ymmmodel" name="model" disabled="disabled">
<option value=""><?php echo $text_please_select_model; ?></option>
<script>
(function($) {
setTimeout(function() {
$('#ymmmodel').styler();
}, 3500)
})(jQuery);
</script>
</select>
</div>
В свою очередь этот кусок кода (он идёт чуть дальше того что сверху) штатно обновляет значение второго select'a и делает его активным:
<script type="text/javascript"><!--
$('#ymmmake').change(function(){
$.post('index.php?route=module/ymmfilter/getmodel',
{ make_id : $('#ymmmake').val() },
function(data) {
$('#ymmmodel').html(data);
}
);
$('#ymmmodel').prop('disabled', false);
$('#ymmyear').prop('disabled', true);
<?php if (strcmp(VERSION,'1.5.2') < 0) { ?>
$('.ymm-submit a').removeClass("button-disabled").addClass("ymm-button");
<?php } else { ?>
$('.ymm-submit a').removeClass("button-disabled-53").addClass("ymm-button");
<?php } ?>
});
Буду очень благодарен за советы, если есть альтернативные модули стилизации которые будут работать лучше - буду рад советам и на эту тему.
Апдэйт:
Апдэйт
Изменил код вот так:
<form id="ymm-form" action="index.php?route=module/ymmfilter/setymm" method="POST">
<div class="ymm-make">
<!-- <label for="make"><?php echo $text_make; ?></label> --!>
<select name="make" id="ymmmake">
<option value=""><?php echo $text_please_select_make; ?></option>
<?php foreach ($makes as $make) { ?>
<option value="<?php echo $make['id']; ?>"><?php echo $make['make']; ?></option>
<?php } ?>
<script>
(function($) {
$(function() {
$('#ymmmake').styler();
$('#ymmmake').change(function(){
$('#ymmmodel').trigger('refresh');
});
});
})(jQuery);
</script>
</select>
</div>
<?php if($this->config->get('ymmfilter_model')) { ?>
<div class="ymm-model">
<!-- <label for="model"><?php echo $text_model; ?></label> --!>
<select id="ymmmodel" name="model" disabled="disabled">
<option value=""><?php echo $text_please_select_model; ?></option>
<script>
(function($) {
setTimeout(function() {
$('#ymmmodel').styler();
}, 3500)
})(jQuery);
</script>
</select>
</div>
Добился того чтобы второй select становился активным, но при этом он пуст. :(
