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

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

屏幕截图：


网站示例：

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

最佳答案

我创造了自己

演示：
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');
    }
});

关于jquery - 价格范围-带下拉菜单的双输入框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28018112/