laravel javascript 比较2个盒子

Question

我有两个不同的 select 盒子，在 Laravel 中有相同的数据，我想知道你如何比较这两个盒子，这样你就不能 select 在selects.

{!! 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 个 select 框中获取 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个盒子

laravel javascript compare 2 boxes

javascript

php

laravel