下拉菜单到单选按钮？

Question

我在搜索部分有一个下拉菜单。当我从下拉菜单中选择某些内容时，搜索字段正在发生变化。我想将下拉菜单转换为单选按钮。 这是下拉菜单的代码：

    <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>

有人可以帮我把它变成单选按钮吗？

Answer 1

要将其转换为单选按钮，您只需使用<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}

重复的onclick 不是很优雅，但这是您理解的最直接的方式。

为了使代码看起来更好，您可以将 onclick 事件与 Javascript 绑定。如果您使用的是 jQuery，它将是

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