JSFiddle - React, Tailwind, and code Playground

by Lien Z

HTML

<div>
    	<h4>默认无选择</h4>

    <div class="car_filter"></div>
</div>
<div>
    	<h4>默认一级已选择, [4348]</h4>

    <div class="car_filter_step1"></div>
</div>
<div>
    	<h4>默认二级已选择, [4348, 4373]</h4>

    <div class="car_filter_step2"></div>
</div>
<div>
    	<h4>默认三级已选择, [4348, 4373, 4378]</h4>

    <div class="car_filter_step3"></div>
</div>

JavaScript

"use strict";
var ui_strings = {
    api: {
        defaultUrl: "http://api.nuonuo.com.cn/StepSelect/getOption/groupname/",
        allCarUrl: "http://api.nuonuo.com.cn/StepSelect/getOption/groupname/carmodel/pid/0"
    }
}


    function SelectCar(elem, defaultValueArr) {
        this.elem = elem || $("#select-car-wrapper");
        this.defaultValueArr = defaultValueArr || [];
        this.hasDefault = (this.defaultValueArr.length == 0) ? false : true;
        this.buildWrapper();
        this.bindingEvent();
        this.selectArr = [this.$selectCarElem, this.$selectSeriesElem, this.$selectModelElem];
        this.$selectCarElem.change()
    }

SelectCar.prototype.buildWrapper = function () {

    this.$elem = $(this.elem);

    // Make Child Select Elements
    // Select Brand select 
    this.$selectCarElem = $("<select>").attr({
        "name": "car_brand_id",
            "id": "brand-select",
            "class": "form-control input-medium"
    }).append("<option value>请选择</option>");

    // Select Series Select
    this.$selectSeriesElem = $("<select>").attr({
        "name": "car_series_id",
            "id": "series-select",
            "class": "form-control input-medium"
    }).prop("disabled", true).append("<option value>请选择</option>");

    // Select Model Select
    this.$selectModelElem = $("<select>").attr({
        "name": "car_series_id",
            "id": "model-select",
            "class": "form-control input-medium"
    }).prop("disabled", true).append("<option value>请选择</option>");

    //Append Child Select Element
    this.$elem.append(this.$selectCarElem, this.$selectSeriesElem, this.$selectModelElem);
};

SelectCar.prototype.bindingEvent = function () {

    var _this = this;

    _this.$elem.on("change", _this.$elem.children("select"), function (e) {

        var _thisSelect = $(e.target),
            _thisVal = _thisSelect.val() || 0,
            _nextSelect = _thisVal == 0 ? _thisSelect : _thisSelect.next("select");
       ...