Question

我在Laravel中有两个不同的选择框和相同的数据，我想知道如何比较这些2，这样你就不能在两个选择中选择相同的选项。

{!! Form::open() !!}

        <div class="form-group">
        {!! Form::label('option_list', 'Choice 1', ['class' => 'col-sm-1 control-label']) !!}
            <div class="col-sm-10">
        {!! Form::select('option_list1', $option1, null, ['class' => 'form-control'] ) !!}
            </div>
        </div>

        <div class="form-group">
        {!! Form::label('option_list', 'Choice 2', ['class' => 'col-sm-1 control-label']) !!}
            <div class="col-sm-10">
        {!! Form::select('option_list2', $option2, null, ['class' => 'form-control']) !!}
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-1"></div>
            <div class="col-sm-10">
        {!! Form::submit('Submit!', ['class' => 'btn btn-default']) !!}
            </div>
        </div>

        {!! Form::close() !!}

我正在考虑从2个选择框中获取id，然后使用if语句检查这两个选项没有相同的id。

更新

您是否知道我如何将您的Javascript代码与Select2 Javascript代码相结合。

因为使用Select2代码，如果它不存在，我可以创建一个新字段。但是他取消了你的Javascript代码，我不想发生因为它完美无缺！

        $('.option_list').select2({
        placeholder: "Select or add tags",
        tags: true,
        tokenSeparators: [",", " "],
        createTag: function(newTag) {
            return {
                id: newTag.term,
                text: newTag.term + ' (new)'
            };
        }
    });

Answer 1

您可以执行以下操作：

<script>
    (function () {
        // Get select elements
        var sel1 = document.getElementsByName('option_list1')[0];
        var sel2 = document.getElementsByName('option_list2')[0];

        // Cache each select options
        var opts1 = sel1.getElementsByTagName("option");
        var opts2 = sel2.getElementsByTagName("option");

        // Helper function for hiding an option in a select
        var hideOption = function (opts, val) {
            for (var i = 0; i < opts.length; i++) {
                if (opts[i].value == val) {
                    opts[i].style.display = 'none';
                }
                else {
                    opts[i].style.display = 'block';
                }
            }
        }

        // When selecting a value in the first select hide it in the second
        sel1.onchange = function () {
            hideOption(opts2, this.value);
        }

        // When selecting a value in the second select hide it in the first
        sel2.onchange = function () {
            hideOption(opts1, this.value);
        }
    })();
</script>

这是working example。

如果你想要更少的代码，还有jQuery方法：

<script>
    (function () {
        // Get select elements
        var sel1 = $('[name=option_list1]');
        var sel2 = $('[name=option_list2]');

        // Cache each select options
        var opts1 = sel1.children('option');
        var opts2 = sel2.children('option');

        // When selecting a value in the first select hide it in the second
        sel1.change(function () {
            opts2.show().filter('[value=' + this.value + ']').hide();
        });

        // When selecting a value in the second select hide it in the first
        sel2.change(function () {
            opts1.show().filter('[value=' + this.value + ']').hide();
        });
    })();
</script>

这是一个working example。

laravel javascript比较2盒

1 个答案: