Dynamic select with Javascript

Question

I have an option where the user puts his sex, and depending on the sex, the select will switch to the civil status of a man or of a woman, but I don’t know how to first delete the options who are and then place the new ones that are inside the array.

<label for="frmSexoMasc">Masculino</label>
<input type="radio" id="frmSexoMasc" name="frmSexo" value="M" checked onclick="mudaCivilM()"></input><br>
<label for="frmSexoFem">Feminino</label>
<input type="radio" id="frmSexoFem" name="frmSexo" value="F" onclick="mudaCivilF()"></input><br><br>

<label for="frmCivil">Estado civil: </label>
<select id="frmCivil" name="frmCivil">
    <option value="0">------</option>
    <option value="S">Solteiro</option>
    <option value="C">Casado</option>
    <option value="Z">Separado</option>
    <option value="D">Divorciado</option>
    <option value="V">Viúvo</option>
</select><br>

function mudaCivilF(){
    var opt_F = new Array("-----------", "Solteira", "Casada", "Separada", "Divorciada", "Viúva");
    for (var i = 0; i < 6; i++) {

    }
}

function mudaCivilM(){
    var opt_M = new Array("-----------", "Solteiro", "Casado", "Separado", "Divorciado", "Viúvo");
}

Answer 1

It seems to me you’re just trying to change the text of option, then we can do it this way:

function mudaCivilF(){
    var opt_F = new Array("-----------", "Solteira", "Casada", "Separada", "Divorciada", "Viúva");
    
    console.log( 'Muda para F' )
    mudarTextoDosOption( opt_F );
}

function mudaCivilM(){
    var opt_M = new Array("-----------", "Solteiro", "Casado", "Separado", "Divorciado", "Viúvo");
    
    console.log( 'Muda para M' )
    mudarTextoDosOption( opt_M );
}


function mudarTextoDosOption( arr )
{
    /// ; Primeiro passo vamos pegar o elemento Select pelo seu id
    var select=document.getElementById('frmCivil');

    /// ; Segundo passo usar a array para mudar o texto dos elementos filhos do Select, 
    /// ; para isso vamos utilizar a propriedade `children` que contem os filhos do 
    /// ; elemento e mudar seu `innerHTML` ficando como mostrado abaixo:
    for( var i in arr )
    {
        select.children[i].innerHTML = arr[i];
        /// ;           ^                  ^ posição do array
        /// ;           posição do option

        /// ; ex:  
        /// ;    select.children[ 0 ].innerHTML  inicialmente tem o valor de "------"
        /// ;    select.children[ 1 ].innerHTML  inicialmente tem o valor de "Solteiro"
        /// ; e assim continua 
    }
}

<label for="frmSexoMasc">Masculino</label>
<input type="radio" id="frmSexoMasc" name="frmSexo" value="M" checked onclick="mudaCivilM()"></input><br>
<label for="frmSexoFem">Feminino</label>
<input type="radio" id="frmSexoFem" name="frmSexo" value="F" onclick="mudaCivilF()"></input><br><br>

<label for="frmCivil">Estado civil: </label>
<select id="frmCivil" name="frmCivil">
    <option value="0">------</option>
    <option value="S">Solteiro</option>
    <option value="C">Casado</option>
    <option value="Z">Separado</option>
    <option value="D">Divorciado</option>
    <option value="V">Viúvo</option>
</select><br>

^{Note: Remember that your javascript must be inside the tags <script> ... </script>}

Answer 2

As the element <option> usually need a text to display and an attribute value, instead of a array, the most ideal would be for you to use an object:

const options = {
  M: {
    0: 'Selecione...',
    S: 'Solteiro',
    C: 'Casado',
    Z: 'Separado',
    D: 'Divorciado',
    V: 'Viúvo'
  },
  F: {
    0: 'Selecione...',
    S: 'Solteira',
    C: 'Casada',
    Z: 'Separada',
    D: 'Divorciada',
    V: 'Viúva'
  }
}

So that you can access the options for the desired sex dynamically, for example:

const gender = 'M'
options[gender] // Ou somente `options.M`.

const options = {
  M: {
    0: 'Selecione...',
    S: 'Solteiro',
    C: 'Casado',
    Z: 'Separado',
    D: 'Divorciado',
    V: 'Viúvo'
  },
  F: {
    0: 'Selecione...',
    S: 'Solteira',
    C: 'Casada',
    Z: 'Separada',
    D: 'Divorciada',
    V: 'Viúva'
  }
}

const gender = prompt('Digite "M" ou "F" e receba as opções dinamicamente...')
const optionsToGender = options[gender]

console.log(optionsToGender)

---

So we can do something like this:

function changeOptions(gender) {
  const options = {
    M: {
      0: 'Selecione...',
      S: 'Solteiro',
      C: 'Casado',
      Z: 'Separado',
      D: 'Divorciado',
      V: 'Viúvo'
    },
    F: {
      0: 'Selecione...',
      S: 'Solteira',
      C: 'Casada',
      Z: 'Separada',
      D: 'Divorciada',
      V: 'Viúva'
    }
  }

  // Escolhemos dinamicamente as opções para o gênero passado como parâmetro:
  const optionsToGender = options[gender]

  // Selecionamos o `<select>` do estado civil:
  const select = document.querySelector('#estado-civil')

  // Removemos todas as opções que já estão no `<select>`:
  select.innerHTML = ''

  // Iteramos sobre todas as opções disponíveis para o gênero selecionado,
  // criando as `<option>`s dinamicamente:
  for (const [value, text] of Object.entries(optionsToGender)) {
    const option = document.createElement('option')
    option.textContent = text
    option.value = value

    select.appendChild(option)
  }
}

<label for="gender-m">Masculino:</label>
<input type="radio" name="gender" id="gender-m" value="M" onclick="changeOptions('M')" checked />

<br />

<label for="gender-f">Feminino:</label>
<input type="radio" name="gender" id="gender-f" value="F" onclick="changeOptions('F')" />

<br />

<label for="estado-civil">Estado civil: </label>
<select name="estado-civil" id="estado-civil">
  <option value="0">-----</option>
  <option value="S">Solteiro</option>
  <option value="C">Casado</option>
  <option value="Z">Separado</option>
  <option value="D">Divorciado</option>
  <option value="V">Viúvo</option>
</select>