下拉菜單到單選按鈕？

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}
});