html - 请问这选中的值怎么提交到后台让php获取到？

问题描述

问 题

html:

    <div class="ux-select-box">
            <!-- 筛选条件 -->
            <div class="ux-select-result ux-clear">
                <div class="ux-flex-box ux-clear">
                    <div class="ux-flex-left">
                        <div class="select-title">您已选择</div>
                    </div>
                    <div class="ux-flex-right">
                        <dl>
                            <dd class="select-no">不限</dd>
                            <dd class="del-select">全部清除</dd>
                        </dl>
                    </div>
                </div>
            </div>
            <ul class="ux-select-list">
                <li class="ux-select-item ux-clear">
                    <div class="ux-box ux-clear">
                        <div class="ux-left">
                            <div class="select-title">所在地</div>
                        </div>
                        <div class="ux-left">
                            <div class="ux-box ux-clear">
                                <div class="ux-left">
                                    <div class="select-all selected" data-name="district" data-item="select1item0">
                                        <span>不限</span></div>
                                </div>
                                <div class="ux-left">
                                    <dl id="select1">
                                        <dd data-name="distric" data-city="011" data-item="select1item1"><span>北京</span></dd>
                                        <dd data-name="distr" data-city="022" data-item="select1item2"><span>上海</span></dd>
                                        <dd data-name="dis" data-city="033" data-item="select1item3"><span>南京</span></dd>
                                        <dd data-name="distric" data-city="011" data-item="select1item1"><span>北京</span></dd>
                                        <dd data-name="distr" data-city="022" data-item="select1item2"><span>上海</span></dd>
                                        <dd data-name="dis" data-city="033" data-item="select1item3"><span>深圳</span></dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="ux-select-item ux-clear">
                    <div class="ux-box ux-clear">
                        <div class="ux-left">
                            <div class="select-title">牌照地</div>
                        </div>
                        <div class="ux-left">
                            <div class="ux-box ux-clear">
                                <div class="ux-left">
                                    <div class="select-all selected" data-name="license" data-item="select4item0">
                                        <span>不限</span>
                                    </div>
                                </div>
                                <div class="ux-left">
                                    <dl id="select4">
                                        <dd data-name="license" data-item="select4item1"><span>京</span></dd>
                                        <dd data-name="license" data-item="select4item2"><span>沪</span></dd>
                                        <dd data-name="license" data-item="select4item3"><span>鲁</span></dd>
                                        <dd data-name="license" data-item="select4item4"><span>苏</span></dd>
                                        <dd data-name="license" data-item="select4item5"><span>浙</span></dd>
                                        <dd data-name="license"    data-item="select1item6"><span>粤</span></dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="ux-select-item ux-clear">
                    <div class="ux-box ux-clear">
                        <div class="ux-left">
                            <div class="select-title">竞价方式</div>
                        </div>
                        <div class="ux-left">
                            <div class="ux-box ux-clear">
                                <div class="ux-left">
                                    <div class="select-all selected" data-name="bidding" data-item="select5item0">
                                        <span>不限</span></div>
                                </div>
                                <div class="ux-left">
                                    <dl id="select5">
                                        <dd class="bidding-type" data-name="bidding" data-item="select5item1"><span>明拍</span>
                                        </dd>
                                        <dd class="bidding-type" data-name="bidding" data-item="select5item2"><span>暗拍</span>
                                        </dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>

js:

$(document).ready(function () {
    //不限选择条件
    $(".ux-select-list").on("click", ".select-all", function () {

        if (!$(this).hasClass("selected")) {
            $(this).addClass("selected");
        }

        var $flexBox = $(this).parents(".ux-select-item");
        $flexBox.find("dd").removeClass("selected");
        $flexBox.find("li").removeClass("selected");
        var $selectResult = $(".ux-select-result");
        var selected = $flexBox.find("dl").attr("id");
        $selectResult.find("." + selected).remove();

        if ($(this).data("name") == 'brand') {
            $selectResult.find(".select-brand").remove();
            $selectResult.find(".select-series").remove();
            $(".series-grid").slideUp(400);
        }

        if ($selectResult.find(".selected").size() < 1) {
            $(".select-no").show();
            $(".del-select").hide();
        }
        //组合条件
        var str = getAllConditional();
        console.log(str);
    });

    //删除已选择的选项
    $(".ux-select-result").on("click", "dd:not(':last')", function () {
        if ($(this).hasClass("select-no")) {
            return false;
        }

        var item = $(this).attr("data-item");

        var $dropSeries = $(".series-grid");
        var $dropBrand = $(".brand-grid");
        //品牌
        if ($(this).hasClass("select-brand")) {

            $dropBrand.parents(".ux-select-item").find(".select-all").addClass("selected");
            $dropSeries.find("dl").remove();
            $(this).parents("dl").find(".select-series").remove();
            $dropBrand.find("li").removeClass("selected");
            $dropSeries.find("li").removeClass("selected");
            $dropSeries.slideUp(400);
        }

        //车系
        if ($(this).hasClass("select-series")) {
            $dropSeries.find("dl").remove();
            $dropSeries.find("li").removeClass("selected");
        }


        var cItem = $("." + item);
        cItem.removeClass("selected");

        cItem.each(function () {
            if ($(this).parents("dl").find(".selected").size() == 0) {
                $(this).parents(".ux-select-item").find(".select-all").addClass("selected");
            }
        });

        if (!$(this).hasClass("del-select")) {
            $(this).remove();
        } else {
            $(this).hide();
        }

        if ($(".ux-select-result").find(".selected").size() < 1) {
            $(".select-no").show();
            $(".del-select").hide();
        }

        //组合条件
        var str = getAllConditional();
        console.log(str);
    });

    //全部清除
    $(".del-select").on("click", function () {
        clearAll($(this));
        //组合条件
        var str = getAllConditional();
        console.log(str);
    });

    function clearAll(obj) {
        obj.hide();
        $(".ux-select-result .selected").remove();
        $(".ux-select-list dd").removeClass("selected");
        $(".select-no").show();
        var $selectAll = $(".ux-select-list .select-all");
        if (!$selectAll.hasClass(".selected")) {
            $selectAll.addClass("selected");
        }
        var $series = $(".series-grid");
        var $brand = $(".brand-grid");
        $series.find("dl").remove();
        $series.find("li").removeClass("selected");
        $brand.find("li").removeClass("selected");
        $series.slideUp(400);
    }

    //选项选中
    $(".ux-select-list").on("click", "dd", function () {
        var itemIndex = $(this).data("item");
        if ($(this).hasClass("selected")) {

            $(this).removeClass("selected");
            var $selectResult = $(".ux-select-result");
            $('.ux-select-result .' + itemIndex).remove();
            if ($selectResult.find(".selected").size() < 1) {
                $(".select-no").show();
                $(".del-select").hide();
            }
            if ($(this).parents("dl").find(".selected").size() < 1) {
                $(this).parents(".ux-select-item").find(".select-all").addClass("selected");
            }
        } else {
            var item = $(this).data("item");
            var selected = $(this).parent("dl").attr("id");

            if ($(this).hasClass("bidding-type")) {
                $(this).siblings("dd").removeClass("selected");
            }
            $(this).addClass("selected").addClass(item);

            $(this).parents(".ux-select-item").find(".select-all").removeClass("selected");

            var $selectResult = $(".ux-select-result");


            if ($(".selected" + item).length < 1) {
                var copyThisA = $(this).clone();
                var selectLastDd = $(".ux-select-result dl").find("dd:last");
                if (!$(this).hasClass("bidding-type")) {

                    //每一项选择时改变'全部'
                    var allSize = $('.ux-select-result .' + selected).size();
                    var size = $("#" + selected).find("dd").size();
                    if (allSize == size && size != 1) {
                        $('.ux-select-result .' + selected).remove();
                        $("#" + selected).find("dd").removeClass("selected");
                        $("#" + selected).parents(".ux-select-item").find(".select-all").addClass("selected");
                        if ($selectResult.find(".selected").size() < 1) {
                            $(".ux-select-result .del-select").hide();
                            $(".ux-select-result .select-no").show();
                        }
                    }
                } else {
                    if ($selectResult.find("dd").hasClass("bidding-type")) {
                        $selectResult.find("dd.bidding-type").remove();
                    }
                }
                copyThisA.removeClass(item).addClass(item).addClass(selected).insertBefore(selectLastDd);
                $selectResult.find(".select-no").hide();
                $selectResult.find(".del-select").show();
            }
        }

        //组合条件
        var str = getAllConditional();
        console.log(str);
    });

    //以下为获取选项条件
    function getAllConditional() {
        var str = "";
        $(".ux-select-list").find("dl").each(function (index) {
            str += getStr(index);
        });
        return str;
    }

    function getStr(str) {
        var tempStr = "";
        var $select = $(".ux-select-result .select" + str);

        var size = $select.size();
        if (size > 0) {
            tempStr = getText($(".ux-select-result .select" + str));

        } else {
            var $first = $("#select" + str).parents(".ux-select-item").find(".select-all");
            tempStr = "&" + $first.data("name") + "=" + $first.find("span").text();
        }
        return tempStr;
    }

    function getText(obj) {
        var temp = "";

        obj.each(function () {
            var $that = $(this);
            if (typeof($that.attr("data-city")) == "undefined") {
                temp += "&" + $that.data("name") + "=" + $.trim($that.find("span").text());
            } else {
                temp += "&" + $that.data("name") + "=" + $that.data('city');
            }
        });
        return temp;
    }
});

请问我怎么将选中的值提交到后台让php处理呢？

或者有什么其他更简便的方法能实现呢？谢谢

解决方案

可以直接用ajax异步来请求，点击一次，请求一次数据，然后渲染列表就行了，至于你说的要什么方式传递，建议直接get来请求，eg:&city=shanghai&pz=su&type=all 这样就可以了，如果你想做同步的话，你的js就不用写那么复杂了，直接回调判断就可以了

这篇关于html - 请问这选中的值怎么提交到后台让php获取到？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！