Question

我可能正在解决所有这些错误。

我制作了一个插件，用于加载带有描述和从下拉列表中选择的名称的图像。这些图像用于单页网站的背景，因此我希望它们从下拉列表中只能选择一次名称。这样就不能将多个图像分配给一个区域的背景。下一个条目将无法使用该选项，或者在名称下拉列表中将无法选择该选项。

这可能吗，或者有更好的方法解决这个问题？

编辑-这是在后端插件表单中的下拉菜单。

Answer 1

您可能可以使用Javascript / Jquery进行更优雅的处理，但是可以肯定的是，我知道您可以使用Octobercms AJAX和Session来完成此操作。（我喜欢使用OctoberCMS提供的功能）这是我仅使用October的CMS页面制作的临时代码。

我用了三个部分
我使用jquery来观看<select>标签并运行Ajax请求
我使用OctoberCMS Session来存储值

这是部分的标记代码：您会注意到，这只会打印选择元素的<option>值。

<option value="">Select</option>
{% for a in array %}
<option value="{{ a }}" {% if a == selected %}selected{% endif %}>{{ a }}</option>
{% endfor %}

局部零件的PHP代码将随每个局部零件而变化，但例如，这是第一个：在这里，您将启动一个数组。然后，我们使用Session::get('select2')检查会话中的值。注意-1； unset($array[$select2])时，它正在寻找索引键。我们的数组确实看起来像[0=>1, 1=>2, 2=>3, 3=>4, 4=>5]，很容易减去一个就可以找到键索引。由于数组中没有索引键unset($array[-1])，因此我们也无法使用-1。接下来，我们通过使用<select>调用自己的会话值来获取Session::get('select1')的选定值。然后我们将构造的数组推到部分数组。

function onStart() {
    $array = [1,2,3,4,5];
    $select2 = Session::get('select2') - 1;
    unset($array[$select2]);
    $select3 = Session::get('select3') - 1;
    unset($array[$select3]);
    $this['selected'] = Session::get('select1');
    $this['array'] = $array;
}

CMS页面标记如下所示：前三个项分别按部分调用选择选项。让我们看一下Jquery。我正在监视#selectOne进行更改，然后调用该请求。我们更新其他所有部分。我们随请求一起推送name属性和值。

<select name="select1" id="selectOne">
{% partial 'select1' %}
</select>
<select name="select2" id="selectTwo">
{% partial 'select2' %}
</select>
<select name="select3" id="selectThree">
{% partial 'select3' %}
</select>

{% put scripts %}
<script>
$('#selectOne').change(function(){

    $(this).request('onUpdate', {
        update: {
            select2: '#selectTwo',
            select3: '#selectThree'
            },
        data: {
            value: $(this).val(),
            name: $(this).attr("name")
            }
    })//*/
});

$('#selectTwo').change(function(){

    $(this).request('onUpdate', {
        update: {
            select1: '#selectOne',
            select3: '#selectThree'
            },
        data: {
            value: $(this).val(),
            name: $(this).attr("name")
            }
    })//*/
});

$('#selectThree').change(function(){

    $(this).request('onUpdate', {
        update: {
            select1: '#selectOne',
            select2: '#selectTwo'
            },
        data: {
            value: $(this).val(),
            name: $(this).attr("name")
            }
    })//*/
});
</script>
{% endput %}

CMS页面功能：在这里，如果该值大于null，我们将使用Session::put(key, value)将信息放入会话中。如果value选项的值为'select'，其值为0（不大于null），我们将从会话中删除选择值。

function onUpdate() {
    if (Input::get('value') > null) {
        Session::put(Input::get('name'), Input::get('value'));
    } else {
        Session::forget(Input::get('name'));
    }
}

同样，有很多方法可以做到这一点，但是我相信您可以很轻松地将代码修改为插件的组件。

Answer 2

所以我没有注意到后端标签，您也没有在您的问题中提及。我不认为您会按照我最初在后端中建议的方式进行操作。这是一个fiddle，我知道您可以在后端中使用它。这是使用的JavaScript，您必须对其进行调整以供使用。

  function preventDupes( select, index ) {
      var options = select.options,
          len = options.length;
      while( len-- ) {
          options[ len ].disabled = false;
      }
      select.options[ index ].disabled = true;
      if( index === select.selectedIndex ) {
          alert('You\'ve already selected the item "' + select.options[index].text + '".\n\nPlease choose another.');
          this.selectedIndex = 0;
      }
  }

  var select1 = select = document.getElementById( 'select1' );
  var select2 = select = document.getElementById( 'select2' );

  select1.onchange = function() {
      preventDupes.call(this, select2, this.selectedIndex );
  };

  select2.onchange = function() {
      preventDupes.call(this, select1, this.selectedIndex );
  };

每个列表项只能选择一次下拉选项吗？

2 个答案: