How should the dynamic filling of the gender of a particular piece of clothing be done?

Asked

Viewed 36 times

1

I have a "dilemma" when registering a product, because not all clothing options are for any gender, for example the option Saia and Vestido cannot be of the genre M (Masculino), for gender only F (Feminino).

What I wish was done:

  • When choosing the option Saia or Vestido in the field Roupa, the field Gênero below was automatically filled in for the <option> F.
  • When an item is an Camiseta, Calça, Bermuda or a Jaqueta (can be as much to M and F), the <option> always remain the first option of <select> (null).

How this kind of behavior should be done?

<!DOCTYPE html>
<html>
<head>
    <title> Cadastrar produto </title>
</head>
<body>
    <form>
        <p> Roupa:
            <select name="nome" id="nome" required="">
                <option value=""></option>
                <option value="Camiseta">Camiseta</option>
                <option value="Calça">Calça</option>
                <option value="Bermuda">Bermuda</option>
                <option value="Jaqueta">Jaqueta</option>
                <option value="Saia">Saia</option>
                <option value="Vestido">Vestido</option>
            </select>
        </p>
        <p> Gênero: 
            <select name="genero" id="genero" required="">
                <option value=""> </option>
                <option value="M">M</option>
                <option value="F">F</option>    
            </select>
        </p>
        <p> <input type="submit" name="Inserir" value="Cadastrar produto"> </p>
    </form>
</body>
</html>
javascript html

  • make a function linked to the "change" event of the select "name", and based on the arrow value correctly the gender value

  • You may have a man-only item?

  • I don’t think you need it, just for women.

1 answer

2


You would have to include more information in the options of "Clothes" to know if the chosen option meets only woman, because the program has no way of knowing that "skirt", for example, is only for women. You can put an attribute data-f empty to differentiate only female options from others:

<option data-f value="Saia">Saia</option>

In the change event you will check if the selected option has data-f and change the second select to F. If you do not have the attribute, select the first option that has empty value:

document.addEventListener("DOMContentLoaded", function(){
   document.getElementById("nome").addEventListener("change", function(){
      document.getElementById("genero").value = this.options[this.selectedIndex].dataset.f !== undefined ? "F" : "";
   });
});
<form>
  <p> Roupa:
      <select name="nome" id="nome" required="">
          <option value=""></option>
          <option value="Camiseta">Camiseta</option>
          <option value="Calça">Calça</option>
          <option value="Bermuda">Bermuda</option>
          <option value="Jaqueta">Jaqueta</option>
          <option data-f value="Saia">Saia</option>
          <option data-f value="Vestido">Vestido</option>
      </select>
  </p>
  <p> Gênero: 
      <select name="genero" id="genero" required="">
          <option value=""> </option>
          <option value="M">M</option>
          <option value="F">F</option>    
      </select>
  </p>
  <p> <input type="submit" name="Inserir" value="Cadastrar produto"> </p>
</form>

  • In the script you wouldn’t have to put it all inside a Function and call it in the select of the clothing field? When I do the test isn’t working.

  • No need to call in select. Addeventlistener already listens when select is changed.

  • In mine is not going

  • I put the JS inside the <head>.

  • I’ve updated the JS code in the answer. Change there that it will work.

  • Now yes, the JS is working, thank you, man.

Show 1 more comment

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.