javascriptjqueryotrs

Select options based on another option selected

Im trying to select an option when i choose a specific option from list above. Any help how can achieve that?

Print of frontend

enter image description here

The main idea is, when i choose Field_Support, select option "94" from StardardTemplateID

enter image description here

My actual try:

$(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');
                });
            }
        }
    })
});
Solution

  • Here's one way. Bake the value associations into the select option elements as data-attributes. Then just reference it on the change event.

    $(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> -->