选择选项时添加输入文本 - OTRS答案

【问题标题】：Add input text when option selected - OTRS选择选项时添加输入文本 - OTRS
【发布时间】：2021-09-02 02:39:23
【问题描述】：

如果我从此列表中选择特定选项，我会尝试使用特定文本填充主题

前端打印

主题html部分：

<input type="text" id="Subject" name="Subject" value="" class="W75pc Validate  Validate_Required" aria-required="true">

选项列表部分：

已经尝试制作但不起作用的代码：

 $(document).ready(function() {   
   setTimeout(function() {
     const Action = Core.Config.Get("Action");
     const SupportedActions = ["AgentTicketNote"];
     if ($.inArray(Action, SupportedActions) !== -1) {
       if (Action === "AgentTicketNote") {      
        var dyno = document.getElementById("DynamicField_QueueNote_Search");
        dyno.addEventListener("change", changeByOption(dyno.value), false);
       }
     }
     function changeByOption(option) {
       var sub = document.getElementById("Subject");
          if (option === '- Move -') sub.value = '';      
          else if (option === 'Field_Support') sub.value = 'Nota para field';     
          else if (option === 'Helpdesk') sub.value = 'Nota para helpdesk';       
          else if (option === 'Sistemas_Windows') sub.value = 'Nota para sistemas';
     }  
   })
 });

HTML 代码部分：

                        <div class="Row Row_DynamicField_QueueNote">
                        <label id="LabelDynamicField_QueueNote" for="DynamicField_QueueNote">
To queue:
</label>

                            <div class="Field">
                            <select class="DynamicFieldText Modernize" id="DynamicField_QueueNote" name="DynamicField_QueueNote" size="1">
  <option value="">-</option>
  <option value="- Move -" selected="selected">- Move -</option>
  <option value="Field_Support">Field_Support</option>
  <option value="Helpdesk">Helpdesk</option>
  <option value="Sistemas_Windows">Sistemas_Windows</option>
</select>

输入域代码：

<div class="InputField_Selection" style="left: 5px; display: block;"><div class="Text">Helpdesk</div><div class="Remove"><a href="#" title="Remove selection" role="button" tabindex="-1" aria-label="Remove selection: Helpdesk">x</a></div></div>

【问题讨论】：

以防万一你有错字，$(document)你错过了$？
如果您提供一些HTML代码而不是图片会更好。
@ikhvjs，是的，我拼错了

标签： javascript jquery arrays otrs

【解决方案1】：

如果您以正确的方式添加 JavaScript，则无需等待 DOM 加载。另一种方法是this add-on，它也会在 DOM 完全加载后加载 JavaScript。

const Action = Core.Config.Get("Action");
const SupportedActions = ["AgentTicketNote"];

if ($.inArray(Action, SupportedActions) !== -1) {
    if (Action === "AgentTicketNote") {
        $('#DynamicField_QueueNote').on('change', function() {
            const Option = $(this).val();

            if (Option === '- Move -') $('#Subject').val('');
            else if (Option === 'Field_Support') $('#Subject').val('Nota para field');
            else if (Option === 'Helpdesk') $('#Subject').val('Nota para helpdesk');   
            else if (Option === 'Sistemas_Windows') $('#Subject').val('Nota para sistemas');
        });
    }
}

【讨论】：

【解决方案2】：

我没有你的Core.Config，所以我硬编码Action。当你在addEventListener 中传递changeByOption 时，可以从event.target.value 中获取选项值

以下示例

"use strict";
$(document).ready(function () {
  // const Action = Core.Config.Get("Action");
  const Action = "AgentTicketNote";
  const SupportedActions = ["AgentTicketNote"];
  if ($.inArray(Action, SupportedActions) !== -1) {
    if (Action === "AgentTicketNote") {
      const dyno = document.getElementById("DynamicField_QueueNote");
      dyno.addEventListener("change", changeByOption, false);
    }
  }
});

function changeByOption(event) {
  const option = event.target.value;
  console.log(option);
  var sub = document.getElementById("Subject");
  if (option === "- Move -") sub.value = "";
  else if (option === "Field_Support") sub.value = "Nota para field";
  else if (option === "Helpdesk") sub.value = "Nota para helpdesk";
  else if (option === "Sistemas_Windows") sub.value = "Nota para sistemas";
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="Row Row_DynamicField_QueueNote">
      <label id="LabelDynamicField_QueueNote" for="DynamicField_QueueNote">
        To queue:
      </label>

      <div class="Field">
        <select
          class="DynamicFieldText Modernize"
          id="DynamicField_QueueNote"
          name="DynamicField_QueueNote"
          size="1"
        >
          <option value="">-</option>
          <option value="- Move -" selected="selected">- Move -</option>
          <option value="Field_Support">Field_Support</option>
          <option value="Helpdesk">Helpdesk</option>
          <option value="Sistemas_Windows">Sistemas_Windows</option>
        </select>
      </div>
    </div>
    <input id="Subject" type="text" />
  </body>
  <script src="test.js"></script>
</html>

【讨论】：

在你的 sn-p 中，代码就像一个魅力。另一方面，我尝试按照您的指南进行操作，但在我的设置中不起作用imgur.com/KTjPytB
@firewallcj，确保您选择了正确的 DOM 元素。 const dyno = document.getElementById("DynamicField_QueueNote"); 和 var sub = document.getElementById("Subject");。我在回答中选择的 id 可能与您的情况不同。如果仍然无法正常工作，请尝试在控制台中显示一些错误日志。