Select 个选项基于所选的另一个选项

Question

当我从上面的列表中选择一个特定选项时，我正在尝试 select 一个选项。任何帮助如何实现这一目标？

前端打印

主要思想是，当我从 StardardTemplateID

选择 Field_Support、select 选项“94”时

我的实际尝试：

$(document).ready(function () {
    setTimeout(function () {
        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 === 'Field_Support')
                        $("#StandardTemplateID").html("<option value='94'>dados_para_field</option>");
                    else if (Option === 'Helpdesk')
                        $('#Subject').val('Nota para Helpdesk');
                    else if (Option === 'Sistemas_Windows')
                        $('#Subject').val('Nota para Sistemas');
                    else if (Option === 'Networking')
                        $('#Subject').val('Nota para Networking');
                });
            }
        }
    })
});

Answer 1

这是一种方法。将值关联作为数据属性烘焙到 select 选项元素中。然后在 change 事件中引用它。

$(document).ready(function() {
  $('select#DynamicField_QueueNote').change(function() {
    $('select#StandardTemplateID').val($(this).find('option:selected').data('link'))
    $('#StandardTemplateID_Search').val($('select#StandardTemplateID').find('option:selected').text());
    $('#Subject').val($(this).find('option:selected').data('subject'))
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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" data-link='94' data-subject='Nota para Field'>Field_Support</option>
  <option value="Helpdesk" data-link='' data-subject='Nota para Helpdesk'>Helpdesk</option>
  <option value="Sistemas_Windows" data-link='' data-subject='Nota para Sistemas'>Sistemas_Windows</option>
</select>
<hr>
<label>Subject</label>
<input type="text" id="Subject" name="Subject" value="" class="W75pc Validate  Validate_Required" aria-required="true">

<hr>
<label for="StandardTemplateID">Text Template:</label>
<div class="Field">
  <div class="InputField_Container" tabindex="-1">
    <div class="InputField_InputContainer"><input id="StandardTemplateID_Search" class="InputField_Search ExpandToBottom" type="text" role="search" autocomplete="off" aria-label="Text Template:" style="width: 273.333px;" aria-expanded="true"></div>
  </div>
  <select class="Modernize" id="StandardTemplateID" name="StandardTemplateID" style="display: none;">
    <option value="">-</option>
    <option value="71">1ª_Tentativa_Contacto</option>
    <option value="72">2ª_Tentativa_Contacto</option>
    <option value="73">3ª_Tentativa_Contacto</option>
    <option value="80">Acesso_VPN_atribuido</option>
    <option value="94">dados_para_field</option>
  </select>
  <p class="FieldExplanation">Setting a template will overwrite any text or attachment.</p>
</div>




<!--

<select id='select1'>
  <option> Choose...</option>
  <option value='option1' data-link='100'> Option 1 (link to 100)</option>
  <option value='option2' data-link='133'> Option 2 (link to 133)</option>
  <option value='option3' data-link='94'> Option 3 (link to 94)</option>
  <option value='option4' data-link='120'> Option 4 (link to 120)</option>
</select>



<select id='select2'>
  <option></option>
  <option value='94'>Template 94</option>
  <option value='100'>Template 100</option>
  <option value='120'>Template 120</option>
  <option value='133'>Template 133</option>
</select> -->

Answer 2

您可以创建一个条件来检查select[=46=的值 ] 在 change 上，然后设置 input[=46= 的 value ] 如果的 select 等于 目标值.

使用jQuery：

$(document).ready(function() { $('#StandardTemplate').change(function() { if ($(this).val() === '94') { $('#text_template').val($('option[value="94"]').text()) } }) })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="parent"> <select class="Modernize" id="StandardTemplate" name="StandardTemplate"> <option value>-</option> <option value="71">1_Tentative_Contacto</option> <option value="72">2_Tentative_Contacto</option> <option value="73">3_Tentative_Contacto</option> <option value="80">Accesso_VPN_atibuido</option> <option value="94">dadios_para_field</option> </select> <label for="text_template">Text Template: <input name="text_template" id="text_template"></label> </div>

使用香草 JS：

const sel = document.getElementById('StandardTemplate') const input = document.getElementById('text_template') sel.addEventListener('change', e => { if(e.target.value === '94'){ document.getElementById('text_template').value = document.querySelector('option[value="94"]').textContent } })

<div id="parent"> <select class="Modernize" id="StandardTemplate" name="StandardTemplate"> <option value>-</option> <option value="71">1_Tentative_Contacto</option> <option value="72">2_Tentative_Contacto</option> <option value="73">3_Tentative_Contacto</option> <option value="80">Accesso_VPN_atibuido</option> <option value="94">dadios_para_field</option> </select> <label for="text_template">Text Template: <input name="text_template" id="text_template"></label> </div>

Select 个选项基于所选的另一个选项

Select options based on another option selected

javascript

jquery

otrs