时间戳

首页 > 解决方案 > 将清单转换为下拉列表

javascript - 将清单转换为下拉列表

问题描述

这是我现在正在使用的清单单选按钮代码，我想将其转换为下拉列表并允许一次只选择一个选项。有人给我一个如何做到这一点的例子吗？我尝试了但无法获得有效的结果，这是完成过滤器功能所需的最后一个功能。附上示例图片

<h3>Sort</h3>
<div class="list-group-item checkbox">
<label for="radio1">
<input type="radio" id="radio" class="common_selector sort" name="radio" value="ASC"> ASC
</label>
<label>
<input type="radio" class="common_selector sort" name="radio" value="DESC" > DESC
</label>
<label>
</div>

在此处输入图像描述

以下 JQuery 函数正在从此清单中捕获数据

<script>
$(document).ready(function(){

    filter_data();

    function filter_data()
    {
        $('.filter_data').html('<div id="loading" style="" ></div>');
        var action = 'fetch_data';
        var minimum_price = $('#hidden_minimum_price').val();
        var maximum_price = $('#hidden_maximum_price').val();
        var brand = get_filter('brand');
        var sort = get_filter('sort');
        $.ajax({
            url:"fetch_data.php",
            method:"POST",
            data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, brand:brand, sort:sort},
            success:function(data){
                $('.filter_data').html(data);
            }
        });
    }

    function get_filter(class_name)
    {
        var filter = [];
        $('.'+class_name+':checked').each(function(){
            filter.push($(this).val());
        });
        return filter;
    }

    $('.common_selector').click(function(){
        filter_data();
    });

    $('#price_range').slider({
        range:true,
        min:1000,
        max:95000,
        values:[1000, 95000],
        step:500,
        stop:function(event, ui)
        {
            $('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
            $('#hidden_minimum_price').val(ui.values[0]);
            $('#hidden_maximum_price').val(ui.values[1]);
            filter_data();
        }
    });

});
</script>

已经尝试了以下，它没有做任何事情。

<select name="dropdown" size=1>
    <option class="common_selector sort" value="DESC">option 1</option>
    <option class="common_selector sort" value="ASC">option 2</option>
</select>

标签： javascripthtmljquery

解决方案

您需要将选择框连接到 jQuery，例如通过添加类属性。

<select name="dropdown" size=1 class="common_selector">
    <option class="common_selector sort" value="DESC">option 1</option>
    <option class="common_selector sort" value="ASC">option 2</option>
</select>

更改选择元素的 jQuery

$('.common_selector').change(function() {
    filter_data();
});

-it would be odd to 'convert' radiobuttons to a select.

推荐阅读