我可以覆盖选择输入的 onChange 触发器吗？

问题描述 投票：0回答：1

我有一个选择输入并想更改其行为。我通常在某个框架（闪亮）中使用选择输入，所以我希望我在这里给出的示例是可以理解和精确的。

我想在触发 onChange - 事件时更改逻辑。我只希望在选择一个元素时发生这种情况，而不是在未选择任何元素时发生。如果用户删除元素并保持表单不变，我想恢复之前处于活动状态的值。

看看下面的代码：

$(document).ready(function() {
  var selectize = $('#select-beast').selectize({
    delimiter: ',',
    persist: false,
    create: function(input) {
      return {
        value: input,
        text: input
      }
    }
  });

  selectize[0].selectize.on('change', function() {
    var value = selectize[0].selectize.getValue();
    console.log(value);
  });
});
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Selectize Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.default.min.css">
</head>
<body>
  <select id="select-beast" multiple placeholder="Select a beast...">
    <option value="lion">Lion</option>
    <option value="tiger">Tiger</option>
    <option value="bear">Bear</option>
    <option value="elephant">Elephant</option>
    <option value="rhino">Rhino</option>
  </select>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
</body>
</html>

所以在我的例子中，日志消息应该只打印出类似 

Array["bear"]
的内容，但绝不能打印空数组。我知道在这种情况下，可以在 
if
之前执行 
console.log
，但我明确要求更改 onChange 条件，因为在我的实际问题中，我无法直接控制我的框架正在做什么。有办法实现我的目标吗？

  • 空选择时没有更改事件
  • 一旦用户将焦点转移到另一个元素，就恢复之前的值

我想说想要这样的东西是很自然的，所以也许有一个插件能够实现我的目标？

javascript jquery selectize.js
1个回答
0
投票

我们无法覆盖代码，但我们可以绕过它。我通过将 

value
推入一个数组，然后记录第一个最后一个（我知道很令人困惑）选定的值而不是一个空数组来解决这个问题。我用一些小技巧修复了一些问题，但我已经为您注释掉了它们。

$(document).ready(function() {
  let selectize = $('#select-beast').selectize({
    delimiter: ',',
    persist: false,
    create: function(input) {
      return {
        value: input,
        text: input
      }
    }
  });

let previousLog = [];
  selectize[0].selectize.on('change', function() {
    let value = selectize[0].selectize.getValue();

    previousLog.push("" + value); //IDK why but the empty string + value is just what makes this work so I'm going to point this towards js behaviour
    let lastLogged = previousLog.length - 2; //Getting last selected first value. I minus 2 to not log the empty string.

    if(value.length == 0){
      console.log([previousLog[lastLogged]]) //Logging as array rather than string.
    } else {
        console.log(value); //Normal value log
    }
  });
});
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Selectize Example</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.default.min.css">
</head>
<body>
  <select id="select-beast" multiple placeholder="Select a beast...">
    <option value="lion">Lion</option>
    <option value="tiger">Tiger</option>
    <option value="bear">Bear</option>
    <option value="elephant">Elephant</option>
    <option value="rhino">Rhino</option>
  </select>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
</body>
</html>

如果有帮助就点个赞吧！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.