价格范围 - 带下拉的双输入框

Question

任何人都可以使用双输入框提供有关如何实现最小/最大价格范围的演示或工作示例

截图：

示例网站：

http://www.zillow.com/homes/for_sale/New-York-NY/6181_rid/4-_beds/250000-325000_price/912-1185_mp/40.934006,-73.737144,40.476464,-74.220543_rect/10_zm/1_fr/

https://housing.com/in/rent/search?f=eyJsb2N0IjoicG9seSIsInBvbHkiOnsiaWQiOiI3ZDdlN2NlOTI1MTQzMjBjNTEwMiIsImJ1ZmZlciI6ZmFsc2V9fQ%3D%3D

Answer 1

我创造了自己

<强>演示： http://jsfiddle.net/raLxkrms/12/show/

<强> HTML

<div class="container">
    <div class="dropdown">
        <button id="min-max-price-range" class="dropdown-toggle" href="#" data-toggle="dropdown">Budget<strong class="caret"></strong>
        </button>
        <div class="dropdown-menu col-sm-2" style="padding:10px;">
            <form class="row">
                <div class="col-xs-5">
                    <input class="form-control price-label" placeholder="Min" data-dropdown-id="price-min"/>
                </div>
                <div class="col-xs-2"> - </div>
                <div class="col-xs-5">
                    <input class="form-control price-label" placeholder="Max" data-dropdown-id="price-max"/>
                </div>
<div class="clearfix"></div>
                <ul id="price-min" class="col-sm-12 price-range list-unstyled">
                    <li data-value="0">0</li>
                    <li data-value="10">10</li>
                    <li data-value="20">20</li>
                    <li data-value="30">30</li>
                    <li data-value="40">40</li>
                    <li data-value="50">50</li>
                    <li data-value="60">60</li>
                </ul>
                <ul id="price-max" class="col-sm-12 price-range text-right list-unstyled hide">
                    <li data-value="0">0</li>
                    <li data-value="10">10</li>
                    <li data-value="20">20</li>
                    <li data-value="30">30</li>
                    <li data-value="40">40</li>
                    <li data-value="50">50</li>
                    <li data-value="60">60</li>
                </ul>
            </form>
        </div>
    </div>
</div>

<强>的jQuery

$('#min-max-price-range').click(function (event) {
    setTimeout(function(){ $('.price-label').first().focus();   },0);    
});
var priceLabelObj;
$('.price-label').focus(function (event) {
    priceLabelObj=$(this);
    $('.price-range').addClass('hide');
    $('#'+$(this).data('dropdownId')).removeClass('hide');
});

$(".price-range li").click(function(){    
    priceLabelObj.attr('value', $(this).attr('data-value'));
    var curElmIndex=$( ".price-label" ).index( priceLabelObj );
    var nextElm=$( ".price-label" ).eq(curElmIndex+1);

    if(nextElm.length){
        $( ".price-label" ).eq(curElmIndex+1).focus();
    }else{
        $('#min-max-price-range').dropdown('toggle');
    }
});

Answer 2

价格范围 - 带下拉的双输入框

我创建了检查以下链接 -

演示：https://jsfiddle.net/deepak_thakur/a10t07st

        $('.dropdown-menu.ddRange')
            .click(function(e)
            {
                e.stopPropagation();
            });

        function disableDropDownRangeOptions(max_values, minValue)
        {
            if (max_values)
            {
                max_values.each(function()
                {
                    var maxValue = $(this).attr("value");

                    if (parseInt(maxValue) < parseInt(minValue))
                    {
                        $(this).addClass('disabled');
                    }
                    else
                    {
                        $(this).removeClass('disabled');
                    }
                });
            }
        }

        function setuinvestRangeDropDownList(min_values, max_values, min_input, max_input, clearLink, dropDownControl)
        {
            min_values.click(function ()
            {
                var minValue = $(this).attr('value');
                min_input.val(minValue);
                document.getElementById('price_range1').innerHTML=minValue;

                disableDropDownRangeOptions(max_values, minValue);

                validateDropDownInputs();
            });

            max_values.click(function ()
            {
                var maxValue = $(this).attr('value');
                max_input.val(maxValue);
                document.getElementById('price_range2').innerHTML=maxValue;

                toggleDropDown();
            });

            clearLink.click(function()
            {
                min_input.val('');
                max_input.val('');

                disableDropDownRangeOptions(max_values);

                validateDropDownInputs();
            });

            min_input.on('input',
                function()
                {
                    var minValue = min_input.val();

                    disableDropDownRangeOptions(max_values, minValue);
                    validateDropDownInputs();
                });

            max_input.on('input', validateDropDownInputs);

            max_input.blur('input',
                function ()
                {
                    toggleDropDown();
                });

            function validateDropDownInputs()
            {
                var minValue = parseInt(min_input.val());
                var maxValue = parseInt(max_input.val());

                if (maxValue > 0 && minValue > 0 && maxValue < minValue)
                {
                    min_input.addClass('inputError');
                    max_input.addClass('inputError');

                    return false;
                }
                else
                {
                    min_input.removeClass('inputError');
                    max_input.removeClass('inputError');

                    return true;
                }
            }

            function toggleDropDown()
            {
                if (validateDropDownInputs() && 
                    parseInt(min_input.val()) > 0 &&
                    parseInt(max_input.val()) > 0) {

                    // auto close if two values are valid
                    dropDownControl.dropdown('toggle');
                }
            }
        }

        setuinvestRangeDropDownList(
            $('.investRange .min_value'),
            $('.investRange .max_value'),
            $('.investRange .freeformPrice .min_input'),
            $('.investRange .freeformPrice .max_input'),
            $('.investRange .btnClear'),
            $('.investRange .dropdown-toggle'));


    </script>