Make objects appear

Asked

Viewed 116 times

-1

I’m having a hard time making a checkbox appear or disappear depending on the selected option. I don’t understand much of Javascript at the moment.

My example:

I want to make a text box appear when the "Other" option is active, so that the user can inform his situation and a check box when the "Host" option is selected with the machine options. If neither of them are selected, then it will show nothing. I hope someone can help me. Thank you from now on.

<select name="tipobroblema" id="tipoproblema">
    <option value="">- Tipo Problema -</option>
    <option value="maquina">Maquina</option>
    <option value="vazamento">Banheiro</option>
    <option value="arcondicionado">Ar Condicionado</option>
    <option value="outro">Outro</option>
</select>
javascript html css html5

  • If you do inputs of type "Radio Button" from to do only with CSS, now if it is a list of type Select I think only with JS same

  • Raul posts the code he has developed so far.

  • I’m just with select Leandro.

  • Yes, Hugo. But I need to do it with select

3 answers

1

HTML:

    <select name="tipobroblema" id="tipoproblema">
        <option value="">- Tipo Problema -</option>
        <option value="maquina">Maquina</option>
        <option value="vazamento">Banheiro</option>
        <option value="arcondicionado">Ar Condicionado</option>
       <option value="outro">Outro</option>
     </select>

     <div id="maquina">Maquina: <input type="text" name="maquina" /></div>
     <div id="outro" style="display:none;">Outro: <input type="text" name="outro" /></div>

Javascript

$(function() {

  var maquina = $('#maquina');
  var outro = $('#outro');
  var tipoproblema = $('#tipoproblema');

  maquina.hide();
  outro.hide();

  tipoproblema.on("change", function() {
    maquina.hide();
    outro.hide();

    if(this.value == 'maquina') {
         maquina.show();
      } else if(this.value == 'outro') {
          outro.show();
      }
  });
});

If you don’t have jquery added to your HTML, add it like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

See working: https://jsfiddle.net/anndreyy/wbzbgj0z/3/#&togetherjs=CT96Ndf6rC

0

I’ll show you a simple example, to base and build your code, basically you need to take the chosen value and check and show the input you want

$('#tipoproblema').change(function(){
    if(this.value == 'maquina') {
        $('#divMaquina').css('display', '');
        $('#divOutro').css('display', 'none');
    } else if(this.value == 'outro') {
        $('#divMaquina').css('display', 'none');
        $('#divOutro').css('display', '');          
    } else {
        $('#divMaquina').css('display', 'none');
        $('#divOutro').css('display', 'none');
    }
});
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 
<select name="tipobroblema" id="tipoproblema">
    <option value="">- Tipo Problema -</option>
    <option value="maquina">Maquina</option>
    <option value="vazamento">Banheiro</option>
    <option value="arcondicionado">Ar Condicionado</option>
   <option value="outro">Outro</option>
 </select>
<div id="divMaquina" style="display:none;">Maquina: <input type="text" name="maquina" /></div>
<div id="divOutro" style="display:none;">Outro: <input type="text" name="outro" /></div>

Let me know if it works

  • Yes it looks very good. I adapted it to my case here. putting a select in the <input> of the machine. I appreciate the help

0


Pure Javascript - no libraries, no jquery.

function myFunction() {
    var x = document.getElementById("mySelect");

    var z = x.options[x.selectedIndex].value;
    
    if (z == "outro") {
    hiddenDiv1.style.display='inline-block';
    } 
    else{
    hiddenDiv1.style.display='none';
    }
    
    if (z == "maquina") {
    hiddenDiv2.style.display='inline-block';
    } 
    else{
    hiddenDiv2.style.display='none';
    }
       
}
#hiddenDiv1,#hiddenDiv2  {
    animation: fadein 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari e Chrome */
    -o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes fadein { /* Safari e Chrome */
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity:0;
    }
    to {
        opacity: 1;
    }
}


/* Efeito Place Holder CSS no input */
::-webkit-input-placeholder {
  color: #000;
  opacity: 0.5;
  -webkit-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:-moz-placeholder {
  color: #000;
  opacity: 0.5;
  -moz-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
::-moz-placeholder {
  color: #000;
  opacity: 0.5;
  -moz-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:-ms-input-placeholder {  
  color: #000;
  opacity: 0.5;
  -ms-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}

/* Place Holder CSS for Focus */
:hover::-webkit-input-placeholder {
  opacity: 0.75;
  -webkit-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:hover:-moz-placeholder {
  opacity: 0.75;
  -moz-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:hover::-moz-placeholder {
  opacity: 0.75;
  -moz-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:hover:-ms-input-placeholder {  
  opacity: 0.75;
  -ms-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}

/* Place Holder CSS for Focus */
:focus::-webkit-input-placeholder {
  opacity: 0;
  -webkit-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:focus:-moz-placeholder {
  opacity: 0;
  -moz-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:focus::-moz-placeholder {
  opacity: 0;
  -moz-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
:focus:-ms-input-placeholder {  
  opacity: 0;
  -ms-transition: opacity 0.35s ease-in-out;
  transition: opacity 0.35s ease-in-out;
}
<select id="mySelect" onchange="myFunction()">
    <option value="">- Tipo Problema -</option>
    <option value="maquina">Maquina</option>
    <option value="vazamento">Banheiro</option>
    <option value="arcondicionado">Ar Condicionado</option>
    <option value="outro">Outro</option>
</select>

<div id="hiddenDiv1" style="display:none">
<input type="text" placeholder="Descreva o problema">
</div>

<div id="hiddenDiv2" style="display:none">
<select class="form-control select" name="estado">
    <option value="">Selecione</option>
    <option value="1">Maquina 1</option>
    <option value="2">Maquina 2</option>
    <option value="3">Maquina 3</option>
    <option value="4">Maquina 4</option>
</select>
</div>

Discovering the selected value

The variable x has the combobox, so we can access some properties like, for example, selectedIndex that contains an integer value with the item index option selected.

Explaining better, each option tag has an index, in your example we have the following:

índice  option
  0     <option value="">- Tipo Problema -</option>
  1     <option value="maquina">Maquina</option>
  2     <option value="vazamento">Banheiro</option>
  3     <option value="arcondicionado">Ar Condicionado</option>
  4     <option value="outro">Outro</option>

When the user clicks on a combobox option, the following code will show which index is chosen: 

x.selectedIndex

each option has at least 2 interesting properties: text and value:

1 - text is the "label", the text between the tags <options></options>.

 x.options[x.selectedIndex].text;

2 - value is the "key", the value of the value property.

 x.options[x.selectedIndex].value;

Another way

If you want to apply the effects of the above example just apply the CSS

 function show(aval) {
    if (aval == "outro") {
    hiddenDiv1.style.display='inline-block';
    } 
    else{
    hiddenDiv1.style.display='none';
    }
    
    if (aval == "maquina") {
    hiddenDiv2.style.display='inline-block';
    } 
    else{
    hiddenDiv2.style.display='none';
    }
    
}
<select onchange="java_script_:show(this.options[this.selectedIndex].value)">
    <option value="">- Tipo Problema -</option>
    <option value="maquina">Maquina</option>
    <option value="vazamento">Banheiro</option>
    <option value="arcondicionado">Ar Condicionado</option>
    <option value="outro">Outro</option>
</select>
</div>

<div id="hiddenDiv1" style="display:none">
<input type="text" placeholder="Descreva o problema">
</div>

<div id="hiddenDiv2" style="display:none">
<select class="form-control select" name="estado">
    <option value="">Selecione</option>
    <option value="1">Maquina 1</option>
    <option value="2">Maquina 2</option>
    <option value="3">Maquina 3</option>
    <option value="4">Maquina 4</option>
</select>
</div>

  • Thank you Leo. Could I put a transition effect when the object appears? It’s just a question

  • @Raulgermano, just add a CSS, edited the answer by putting an effect fadein

Browser other questions tagged javascript html css html5

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