Change select by selecting the sex on a radio button

Question

Change select by selecting the sex on a radio button

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (0 votes)
#4 by (-1 votes)

1

How can I change my selection by choosing the sex of the person?

this is my html code

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script src="https://www.gstatic.com/firebasejs/3.7.5/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    
</head>
<body>
<li><a href="index.html">Inicio</a></li>

    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <div class="container" id="divppal" >
<form style="margin: auto; width: 50%" name="form2"

<a class="navbar-brand logo" title="SOHA">
                <h1>
                    <span>SOHA</span>

                </h1>
              </a>

<div class="form-group"> 
    <h3 class="name-cat">FILTRAR</h3>

    <p>Elegir sexo</p>
<p>
Hombre: <input type="radio" name="citizenship" id="sexo" /><br />
Mujer: <input type="radio" name="citizenship" id="sexo" /><br />
</p>
    <label>Tipo de producto:</label>
    <select name="categoria" id="tipo" required>
    <option value="" disabled selected>Seleccione un tipo...</option>
        <option value="Ropa">Ropa</option>
        <option value="Perfumes">Maquillajes</option>
    </select>
    </div> 
    <br />

    </form> 
</body>

this is my script

function filtrar(){

var sex= document.getElementById('sexo').value;
var sex= document.getElementById('sexo').value;
var tp= document.getElementById('tipo').value;

        if(document.getElementById("sexo").value=="Hombre")
        {
            tp=Ropa;
            document.getElementById('tipo').setAttribute('value',tp);

        }else if(document.getElementById("sexo").value=="Mujer"){
            tp=Maquillajes;
            document.getElementById('tipo').setAttribute('value',tp);
        }else
        alert("Seleccione su sexo");

}

javascript

asked by Emmanuel Arenilla Mendoza 26.04.2018 в 00:04

source

4 answers

Read a txt file index outside the matrix How to make Google Chart work with SQL (Postgres)

score 1 · Answer 1

I think you can try something like this:

function cargarDatos(radio) {
  var options = '<option value="" disabled selected>Seleccione un tipo...</option>';
  if (radio.value == 'hombre') {
    options += '<option value="Ropa">Ropa</option>'
  } else {
    options += '<option value="Perfumes">Maquillajes</option>'
  }
  document.getElementById('tipo').innerHTML = options;
}

Hombre:
<input type="radio" name="citizenship" id="sexo" value="hombre" onChange="cargarDatos(this)" /> Mujer:
<input type="radio" name="citizenship" id="sexo" value="mujer" onChange="cargarDatos(this)" />


<select name="categoria" id="tipo" required>
  <option value="" disabled selected>Seleccione un tipo...</option>
  <option value="Ropa">Ropa</option>
  <option value="Perfumes">Maquillajes</option>
</select>

you must take into account the radio's value in order to discriminate the element.

score 1 · Answer 2

Surely the easiest way is to pass the index of the select element you want to a function in onchange of radiobutton .

In this example I put the call to onchange in each radiobutton but you could do it with addEventListener if you want more clean :

function filtrar(idx){
  let tipo = document.getElementById('tipo');
  tipo.selectedIndex = idx;
}

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<script src="https://www.gstatic.com/firebasejs/3.7.5/firebase.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>    
</head>
<body>
<li><a href="index.html">Inicio</a></li>
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <div class="container" id="divppal" >
<form style="margin: auto; width: 50%" name="form2">
<a class="navbar-brand logo" title="SOHA">
  <h1>
      <span>SOHA</span>
  </h1>
</a>
<div class="form-group"> 
    <h3 class="name-cat">FILTRAR</h3>
    <p>Elegir sexo</p>
<p>
Hombre: <input type="radio" name="radioSexo" onchange="filtrar(1)" id="sexoH" /><br />
Mujer: <input type="radio" name="radioSexo" onchange="filtrar(2)" id="sexoM" /><br />
</p>
    <label>Tipo de producto:</label>
    <select name="categoria" id="tipo" required>
    <option value="" disabled selected>Seleccione un tipo...</option>
        <option value="Ropa">Ropa</option>
        <option value="Perfumes">Maquillajes</option>
    </select>
    </div> 
    <br />
    </form> 
</body>

score 0 · Answer 3

version with javascript

var select = document.getElementById('sexo');
select.addEventListener('change',
  function(){
    var selectedOption = this.options[select.selectedIndex];
    console.log(selectedOption.value + ': ' + selectedOption.text);
  });

score -1 · Answer 4

You can use select:

<label>Sexo:</label>
<select id="sexo" required>
<option value="" disabled selected>Seleccione su sexo...</option>
    <option value="Hombre">Hombre</option>
    <option value="Mujer">Mujer</option>
</select>

You can get your value with jquery:

var sexo = $("#sexo option:selected").val(),