Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

107
Visualizações
JavaScript Dynamically create options based on selection from another drop down using an array

I'm working on a UserScript that adds Buttons to a webpage. One of the buttons I'm working on when clicked will create a popup div. I'm trying to create a dynamic Select/Option dropdown list within the popup, with the options coming from an Array. For the second drop down list I'm trying to create a dynamic drop down list based on the selection in the previous dropdown list, but I'm unsure how to proceed. I'd like the itemDropList's options to be dynamically created based upon the value of the selected option in the typeDropList.

Thanks in advance!

This is my code so far:

var button = document.createElement('button'),
button.onclick = prompt;
function prompt() {
    var blockingDiv = document.createElement('div');
    blockingDiv.id = 'PopupBackground';
    var divPopup = document.createElement('div');
    divPopup.id = 'better1ClickSimTChangeCTIPopup';
    var content = document.createElement('div');
    content.id = 'Content';
    var typeDropList = document.createElement('select');
    typeDropList.id = 'TypeDropList';
    typeDropList.name = 'TypeDropList';
    typeDropList.onchange = changeItem(this.value);
    content.appendChild(typeDropList);
    var typeOptions =
        [
            {
                "text": 'Select Type',
                "value": '',
                "defaultSelected": true,
                "selected": true
            },
            {
                "text": 'Text 1',
                "value": 'A',
                "defaultSelected": false,
                "selected": false
            },
            {
                "text": 'Text 2',
                "value": 'B',
                "defaultSelected": false,
                "selected": false
            },
            {
                "text": 'Text 3',
                "value": 'C',
                "defaultSelected": false,
                "selected": false
            }
        ];
    for (var i = 0; i < typeOptions.length; i++) {
        var typeOption = document.createElement('option');
        typeOption.id = 'TypeOptions';
        typeOption.name = 'TypeOptions';
        var type = typeOptions[i];
        typeOption.appendChild(new Option(type.text, type.value, type.defaultSelected, type.selected));
        typeDropList.appendChild(typeOption);
    }
    var itemDropList = document.createElement('select');
    itemDropList.id = 'ItemDropList';
    content.appendChild(itemDropList);
    var typeItemOptions =
    {
        A: ['Item A 1',
            'Item A 2',
            'Item A 3'],
        B: ['Item B 1',
            'Item B 2',
            'Item B 3'],
        C: ['Item C 1',
            'Item C 2',
            'Item C 3']
    };
about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

There are several issues with your goal, as stated, but since you ask how to proceed I offer these suggestions.

  1. Keep everything in a single DOM, i.e. a single web page with a single context. You may be doing this already but if not your pop up is sure to cause you problems with keeping everything concurrent.

  2. Create your first dropdown (select and options) and get it working to your satisfaction putting the "results" in global memory. I.e. define the result variables using var.

  3. Use the console to be sure you have the correct values to build your second dropdown control.

  4. Test, Test, TEST! Use the built-in Javascript tools to proceed step by step and good luck!

From your code it appears you are trying to do everything in a single Javascript function. You need to break this up into several modules. It will surely require at least two functions. Remember to use good design techniques, modular code is the answer here!

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda