CODEWITHSUNDEEP
javascripthtmlbuttondrop-down-menusmarty
Bogdan Damian
Bogdan Damian

Reputation: 1

Dropdown menu to radio buttons?

I have a dropdown menu on a search section. When I select something from the dropdown menu the search fields are changing. I want to transform the dropdown menu to radio buttons. Here is the code of the dropdown menu :

    <select id="qs_category" name="qs_category" onchange="onQuickSearch(this.form, '{$live_site}'); {if $multi_depending}reloadDep('{$multi_depending}', '{$live_site}');{/if}">
            <option value="">{$lng.search.all_categories}</option>
            {foreach from=$categories item=v name=cat}
            <option value="{$v.id}"{if $v.parent} class="opt_parent"{/if}{* {if $cat==$v.id && $self_noext=="listings"}selected="selected"{/if}*}>{$v.str}{$v.name|escape:"html"}</option>
            {/foreach}
    </select>

Can someone help me to transform this into radio buttons ?

Upvotes: 0

Views: 1191

Answers (1)

Daniel Cheng
Daniel Cheng

Reputation: 870

To transform this to radio buttons, you can just use <input type="radio"...

<label>
    <input name="qs_category" type="radio" value=""
           onclick="onQuickSearch(this.form, '{$live_site}'); {if $multi_depending}reloadDep('{$multi_depending}', '{$live_site}');{/if}">{$lng.search.all_categories}
</label><br>
{foreach from=$categories item=v name=cat}
<label>
    <input name="qs_category" type="radio" value="{$v.id}"{if $v.parent} class="opt_parent"{/if}{* {if $cat==$v.id && $self_noext=="listings"}checked="checked"{/if}*}
           onclick="onQuickSearch(this.form, '{$live_site}'); {if $multi_depending}reloadDep('{$multi_depending}', '{$live_site}');{/if}">{$v.str}{$v.name|escape:"html"}
</label><br>
{/foreach}

The duplicated onclick isn't quite elegant but this is the most straight forward way for you to understand.

To make the codes look better, you can bind the onclick event with Javascript. If you are using jQuery, it will be

$('input[name=qs_category]').click(function() {
    onQuickSearch($(this).parent(), '{$live_site}');
    {if $multi_depending}
        reloadDep('{$multi_depending}', '{$live_site}');
    {/if}
});

Upvotes: 1

Related Questions