Início / coding / Perguntas / 79589820
Accepted
Michael
Asked: 2025-04-24 12:31:52 +0800 CST

Javascript Atribuir a mesma string a várias propriedades

  • 772

Estou criando um formulário onde o usuário seleciona os menus suspensos de 1 a 5. Com base no que ele seleciona para o Menu Suspenso 1, o Menu Suspenso 2 exibirá opções específicas, selecionar o Menu Suspenso 2 definirá o Menu Suspenso 3, e assim por diante.

Quando você chegar ao Drop Down 3, algumas dessas opções no Drop Down 3 usarão as mesmas opções do Drop Down 4.

Atualmente, estou escrevendo uma matriz de quando você seleciona uma opção específica, mas em vez de repetir o texto do Drop Down 4 várias vezes para acompanhar cada opção do Drop Down 3, há uma maneira de escrever as strings uma vez e aplicá-las a várias propriedades?

Veja como eu exibi as opções e quero escrever "Criação de conta", "Exclusão de conta" e "Modificação de conta" apenas uma vez, mas aplicá-las à Escolha 1, 2, 3, etc.

var Tier4ByTier3 = {
   "Choice 1": [
       " ";
       "Account Creation",
       "Account Deletion",
       "Account Modification",
   ],
   "Choice 2": [
       " ";
       "Account Creation",
       "Account Deletion",
       "Account Modification",
   ],
   "Choice 3": [
       " ";
       "Account Creation",
       "Account Deletion",
       "Account Modification",
   ],
}

Este é o meu JavaScript que extrai essas opções:

function ChangeDropdown4(value) {
     if (value.length == 0) document.getElementById("Tier4").innerHTML = "<option></option>";
        else {
           var Tier4Options = "";
           for (Tier4Id in Tier4ByTier3[value]) {
                Tier4Options += "<option>" + Tier4ByTier3[value][Tier4Id] + "</option>";
           }
           document.getElementById("Tier4List").innherHTML = Tier4Options;
        }
}

Veja como o HTML se parece:

<input type="text" list="Tier4List" id="Tier4" onChange="ChangeDropdown4(this.value);">
javascript

1 respostas

  1. Best Answer

    Este é um exemplo clássico de como não duplicar o código. Como as mesmas opções são usadas em vários lugares, defina-as uma vez e use-as quando necessário:

    // Define common account options as a reusable array
const accountOptions = [
  "",
  "Account Creation", 
  "Account Deletion", 
  "Account Modification"
];

// Reference the array in your dropdown definition instead of repeating values
const DropDown3 = {
  "Choice 1": accountOptions,
  "Choice 2": accountOptions,
  "Choice 3": accountOptions
};

    Dessa forma, você só precisa atualizar essas opções em um lugar se precisar alterá-las (adicionar outra, alterar uma, etc.).

    Além disso, sua função de alteração precisa ser corrigida. A versão mais recente é a seguinte:

    function changeDropdown4(value) {
  const tier4List = document.getElementById("Tier4List");
  
  if (!value || value.length === 0) {
    tier4List.innerHTML = "<option></option>";
    return;
  }
  
  // Get options for the selected value
  const options = DropDown3[value] || [];
  
  // Build options HTML
  let tier4Options = "";
  for (let i = 0; i < options.length; i++) {
    tier4Options += "<option>" + options[i] + "</option>";
  }
  
  tier4List.innerHTML = tier4Options;
}

    Também notei alguns problemas na sua marcação HTML. Verifique se a estrutura fica assim ao usar a lista de dados:

    <input type="text" list="Tier4List" id="Tier4" onchange="changeDropdown4(this.value);">
<datalist id="Tier4List"></datalist>

    Em vez de usar listas de dados, você pode usar menus suspensos de seleção.

    <select id="Tier4" onchange="changeDropdown4(this.value);">
  <option></option>
</select>
    • 1

relate perguntas