Materialize框架之form组件select控件联动实现
发布于 10 个月前 作者 smartz 233 次浏览 来自 分享

使用jquery绑定change事件 html代码如下

<div class="container">
    <div class="row">
        <div class="s12">
            <div class="input-field col s12">
                <select name='p'>
                <option value="" disabled selected>change联动</option>
                <option value="1">选项 1</option>
                <option value="2">选项 2</option>
                <option value="3">选项 3</option>
                </select>
            </div>
            <div class="input-field col s12">
                <select name='c'>
                    <option value="" disabled selected>change联动2</option>
                    <option value="1">选项 1</option>
                    <option value="2">选项 2</option>
                    <option value="3">选项 3</option>
                </select>
            </div>
            <div class="input-field col s12">
                <select name='co'>
                    <option value="" disabled selected>change联动3</option>
                    <option value="1">选项 1</option>
                    <option value="2">选项 2</option>
                    <option value="3">选项 3</option>
                    <option value="4">选项 4</option>
                </select>
            </div>
        </div>
    </div>
</div>

js代码如下

      $(document).ready(function() {
        $('select').material_select();
        $('select[name="p"]').on('change', function() {
            $('select[name="c"]').append('<option>change新增</option>');
            $('select').material_select();
        });
        $('select[name="c"]').on('change', function() {
            $('select[name="co"]').append('<option>change新增2</option>');
            $('select').material_select();
        });
      });

效果如下: 微信截图_20171107102556.png

回到顶部