jQuery选择框关联方式

在两个选择框之间限定数据关联关系。

jquery, selectbox,constrain

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2144
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

$("select[data-bound]").on("change", function() {
        var self = this;
        var $this = $(self);
        var value = self.value;
        var $boundTo = $("[data-type='" + $this.data("bound") + "']");

var $dataType = $("[data-type='" + $this.data("type") + "']");
        // Set other dataTypes like me to my new value
        if ($dataType.length > 1) {
            $dataType.each(function() {
                if (this !== self) {
                    $(this).find("option[value='" + value + "']").attr("selected", true);
                }
            })
        }

var enabled = constrains[$this.val()];
        var bdefault = (typeof enabled !== "undefined") ? true : false;
        $("option", $boundTo).attr("disabled", bdefault).each(function() {
            var $this = $(this);
            var val = $this.attr("value");
            if (enabled.indexOf(val) > -1 || val === "") {
                $this.attr("disabled", false)
            }
        })
        $boundTo[0].focus();
    })
}

$(function() {
    addConstrains({
        "honda": ["grey", "yellow"],
        "toyota": ["red", "green", "blue", "yellow", "grey"],
        "vw": ["green"],
        "volvo": ["red", "grey"],
        "audi": ["blue", "yellow"]
    })
})

编译

CSS

HTML

<div class="col-md-3">
                <div class="form-group">
                    <label>Color</label>
                    <select data-type="color" data-bound="car" class="color form-control" size="6">
                        
                        <option value="red">red</option>
                        <option value="green">green</option>
                        <option value="blue">blue</option>
                        <option value="yellow">yellow</option>
                        <option value="grey">grey</option>
                    </select>
                    <br />
                    <label>Color (single line)</label>
                    <select data-type="color" data-bound="car" class="color form-control">
                        <option value="">Any color</option>
                        <option value="red">red</option>
                        <option value="green">green</option>
                        <option value="blue">blue</option>
                        <option value="yellow">yellow</option>
                        <option value="grey">grey</option>
                    </select>
                </div>
            </div>
            <div class="col-md-6">
                <blockquote>The model only needs to define the constrains seen from one of the options:
                    <br>I only "tell" which colors exists for which car. Code will "turn constrains around" and generate the "color to car" constrains.</blockquote>
                <blockquote>Two <code>data-attributes</code> on the <code>select</code> element are used to enforce constrains:
                    <br />
                    <code>data-type</code>: The type of constrain (like <em>car</em>)
                    <br />
                    <code>data-bound</code>: Which data-type is it bound to? (like <em>color</em>)
                    <br />
                </blockquote>
            </div>
        </div>
    </div>
</div>

在两个选择框之间限定数据关联关系。

jquery, selectbox,constrain

编辑器支持Emmet

快捷键

在两个选择框之间限定数据关联关系。

jquery, selectbox,constrain

基于jQuery-UI实现的全屏自适应日期选择控件

使用jQuery和CSS实现自定义的鼠标交互方式

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：