Тема: Как из select сделать radio?
Добрый вечер,
Возможно вопрос совсем детский, но.
Подскажите пожалуйста как из select 
сделать radio 
в шаблоне фильтра?
Re: Как из select сделать radio?
Добрый день
самый простой способ это радиокнопками переключать зачение select-а.
Для этого надо создать радио кнопки, скрыть select, подкорректировать скрипт чтобы jquery не оборачивал select:
В файле шаблона фильтра ("\modules\catalog\view\blocks\sidefilters\filters.tpl") внести следующие изменения
1. конструкцию:
<select class="yesno" name="bfilter[isnum]" data-start-value="">
<option value="">{t}Неважно{/t}</option>
<option value="1" {if $basefilters.isnum == '1'}selected{/if}>{t}Есть{/t}</option>
<option value="0" {if $basefilters.isnum == '0'}selected{/if}>{t}Нет{/t}</option>
</select>заменить на:
<select class="yesno" name="bfilter[isnum]" data-start-value="" style="display: none;">
<option value="">{t}Неважно{/t}</option>
<option value="1" {if $basefilters.isnum == '1'}selected{/if}>{t}Есть{/t}</option>
<option value="0" {if $basefilters.isnum == '0'}selected{/if}>{t}Нет{/t}</option>
</select>
<label><input type="radio" name="rad" value="" onchange="$('.filter .yesno').val('')">{t}Неважно{/t}</label>
<label><input type="radio" name="rad" value="" onchange="$('.filter .yesno').val('1')" {if $basefilters.isnum == '1'}checked{/if}>{t}Есть{/t}</label>
<label><input type="radio" name="rad" value="" onchange="$('.filter .yesno').val('0')" {if $basefilters.isnum == '0'}checked{/if}>{t}Нет{/t}</label>2. в конце файла строку:
$('.filter .cb, .filter .yesno').styler();заменить на:
$('.filter .cb').styler();
3 11.05.2016 16:02:35 Отредактировано Михаил (11.05.2016 16:04:18)
Re: Как из select сделать radio?
Виталий пишет:
Добрый день
самый простой способ это радиокнопками переключать зачение select-а.
Для этого надо создать радио кнопки, скрыть select, подкорректировать скрипт чтобы jquery не оборачивал select:В файле шаблона фильтра ("\modules\catalog\view\blocks\sidefilters\filters.tpl") внести следующие изменения
1. конструкцию:
<select class="yesno" name="bfilter[isnum]" data-start-value=""> <option value="">{t}Неважно{/t}</option> <option value="1" {if $basefilters.isnum == '1'}selected{/if}>{t}Есть{/t}</option> <option value="0" {if $basefilters.isnum == '0'}selected{/if}>{t}Нет{/t}</option> </select>заменить на:
<select class="yesno" name="bfilter[isnum]" data-start-value="" style="display: none;"> <option value="">{t}Неважно{/t}</option> <option value="1" {if $basefilters.isnum == '1'}selected{/if}>{t}Есть{/t}</option> <option value="0" {if $basefilters.isnum == '0'}selected{/if}>{t}Нет{/t}</option> </select> <label><input type="radio" name="rad" value="" onchange="$('.filter .yesno').val('')">{t}Неважно{/t}</label> <label><input type="radio" name="rad" value="" onchange="$('.filter .yesno').val('1')" {if $basefilters.isnum == '1'}checked{/if}>{t}Есть{/t}</label> <label><input type="radio" name="rad" value="" onchange="$('.filter .yesno').val('0')" {if $basefilters.isnum == '0'}checked{/if}>{t}Нет{/t}</label>2. в конце файла строку:
$('.filter .cb, .filter .yesno').styler();заменить на:
$('.filter .cb').styler();
Сделал, но не получилось, не подгружается при клике по радио почему то 
Если убрать style="display: none; и через селект то работает.
<div class="filter">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="cb" data-toggle="collapse" href="#collapseYesNo"><i class="fa fa-angle-up"></i>
{$prop.title}:
</a>
</h4>
</div>
<div id="collapseYesNo" class="panel-collapse collapse in">
<div class="panel-body">
<select class="yesno" name="bfilter[isnum]" data-start-value="" style="display: none; >
<option value="">{t}Неважно{/t}</option>
<option value="1" {if $basefilters.isnum == '1'}selected{/if}>{t}Есть{/t}</option>
<option value="0" {if $basefilters.isnum == '0'}selected{/if}>{t}Нет{/t}</option>
</select>
<label><input type="radio" name="rad" value="" onchange="$('.filter .yesno').val('')">{t}Неважно{/t}</label>
<label><input type="radio" name="rad" value="" onchange="$('.filter .yesno').val('1')" {if $basefilters.isnum == '1'}checked{/if}>{t}Есть{/t}</label>
<label><input type="radio" name="rad" value="" onchange="$('.filter .yesno').val('0')" {if $basefilters.isnum == '0'}checked{/if}>{t}Нет{/t}</label>
</div>
</div>
</div>
</div>В конце файла:
<script type="text/javascript">
$(function() {
$('.filter .cb').styler();
$('.typeInterval .pluginInput').each(function() {
var $this = $(this);
var fromTo = $this.siblings('.fromToLine').hide();
$this.jslider( $.extend( $(this).data('slider'), { callback: function(value) {
var values = value.split(';');
$('input[name$="[from]"]', fromTo).val(values[0]);
$('input[name$="[to]"]', fromTo).val(values[1]);
$this.trigger('change');
}}));
$('input[name$="[from]"], input[name$="[to]"]', fromTo).change(function() {
var from = $('input[name$="[from]"]', fromTo).val();
var to = $('input[name$="[to]"]', fromTo).val();
$this.jslider('value', from, to);
});
});
});
$('.cb').click( function(){
$(this).find('i').toggleClass('fa fa-angle-up').toggleClass('fa fa-angle-down');
});
</script>
4 11.05.2016 17:10:50 Отредактировано Закусило Александр (11.05.2016 17:11:37)
Re: Как из select сделать radio?
После записи значения в выпадающий список, вызовите событие смены значения дополнительно.
$("МОЙ СЕЛЕКТ").trigger('change');Оно заставит отреалировать как на ручную смену выпадающего списка.
И не пишите в атрибуте, это ведь не красиво. 
Re: Как из select сделать radio?
Закусило Александр пишет:
После записи значения в выпадающий список, вызовите событие смены значения дополнительно.
$("МОЙ СЕЛЕКТ").trigger('change');Оно заставит отреалировать как на ручную смену выпадающего списка.
И не пишите в атрибуте, это ведь не красиво.
не получается :-(
Re: Как из select сделать radio?
Закусило Александр пишет:
Код дайте весь.
8 12.05.2016 18:30:10 Отредактировано Закусило Александр (12.05.2016 18:31:47)
Re: Как из select сделать radio?
Сам код:
<div id="collapseYesNo" class="panel-collapse collapse in">
<div class="panel-body">
<select class="yesno" name="bfilter[isnum]" data-start-value="" >
<option value="">{t}Неважно{/t}</option>
<option value="1" {if $basefilters.isnum == '1'}selected{/if}>{t}Есть{/t}</option>
<option value="0" {if $basefilters.isnum == '0'}selected{/if}>{t}Нет{/t}</option>
</select>
<label><input type="radio" name="rad" value="" checked>{t}Неважно{/t}</label>
<label><input type="radio" name="rad" value="1" {if $basefilters.isnum == '1'}{/if}>{t}Есть{/t}</label>
<label><input type="radio" name="rad" value="0" {if $basefilters.isnum == '0'}{/if}>{t}Нет{/t}</label>
</div>
</div>javascript:
<script type="text/javascript">
$(function() {
$('.typeInterval .pluginInput').each(function() {
var $this = $(this);
var fromTo = $this.siblings('.fromToLine').hide();
$this.jslider( $.extend( $(this).data('slider'), { callback: function(value) {
var values = value.split(';');
$('input[name$="[from]"]', fromTo).val(values[0]);
$('input[name$="[to]"]', fromTo).val(values[1]);
$this.trigger('change');
}}));
$('input[name$="[from]"], input[name$="[to]"]', fromTo).change(function() {
var from = $('input[name$="[from]"]', fromTo).val();
var to = $('input[name$="[to]"]', fromTo).val();
$this.jslider('value', from, to);
});
});
});
$('.cb').click( function(){
$(this).find('i').toggleClass('fa fa-angle-up').toggleClass('fa fa-angle-down');
});
$("[name='rad']").on('click', function(){
var context = $(this).closest('.panel-body'); //Определим область где будем всё менять
var val = $("[name='rad']:checked", context).val(); //Выберем, то что выбрали в радиокнопках
$(".yesno", context).val(val).trigger('change'); //Поменяем значении и вызовем событие смены
});
</script> Пользуйтесь console.log когда отлаживаете и Firebug
Re: Как из select сделать radio?
Закусило Александр пишет:
Пользуйтесь console.log когда отлаживаете и Firebug
Спасибо, учту.
Re: Как из select сделать radio?
Михаил пишет:
Закусило Александр пишет:Пользуйтесь console.log когда отлаживаете и Firebug
Спасибо, учту.
Сработало?
