How to change the placehoder according to the value of the select?

Question

I built this code and when the user chooses cafe in the field <input type='search'> should appear for example: Cimo, 3Corações, Utam.

If the user chooses refrigerante it should show in the field: Coca, Pespi, Tubaina.

But these values should be shown in the placeholder.

Code:

<div class="container">
   <div class="row">
      <form id="contactForm" class="form-horizontal" method="POST"  enctype="multipart/form-data">
         <div class="col-sm-9"> 
            <div class="col-sm-3 nav-container">
               <div class="form-group">
                  <!--  <select id="evento" name="evento" onchange="campoSelect(this.value)" required> ...  -->
                  <select class="form-control " id="tipo" name="tipo" onchange="campoSelect(this.value)"  required>
                     <option value="" selected disabled>Selecione TIpo</option>
                     <option value="cafe">Cafe</option>
                     <option value="detergente">Detergente</option>
                     <option value="refiegerante">Refrigenrante</option>
                  </select>
               </div>
            </div>
            <div class="col-sm-6"> 
               <div class="input-group">
                  <input type="hidden" name="search_param" value="all" id="search_param">         
                  <input type="text" class="form-control" name="x" placeholder="Search term...">
                  <span class="input-group-btn">
                     <button class="btn btn-primary" name="pesquisar" type="submit"><span class="glyphicon glyphicon-search"></span></button>
                  </span>
               </div>
            </div>
         </div>
      </form>
   </div>
</div>
<script>

If (val = cafe){
   mensagem = "Cimo, 3Corações,Utam";
}
If (val = refrigerante ){
   mensagem = "Coca, Pespi,Cutuba";
}
function campoSelect(val){
   document.getElementById("mensagem").placeholder = val;
}  

</script>

Answer 1

Create an object for key/value mapping based on value of existing options:

var placeholders = {
  'cafe': 'Cimo, 3Corações, Utam',
  'refrigerante': 'Coca, Pepsi, Catuaba'
};

In case the item does not exist in placeholders, you can make a fallback to display a default value. Considering the above example, placeholders['foo'] would return to me undefined, then you can get around it with:

var placeholder = placeholders['foo'] || 'Search term...';
console.log(placeholder); // Search term... 

Finally just change the attribute of input using the function attr().

$(function(){
  
  var placeholders = {
    'cafe': 'Cimo, 3Corações, Utam',
    'refrigerante': 'Coca, Pepsi, Catuaba'
  };

  $('#tipo').on('change', function(){      
    var placeholder = placeholders[$(this).val()] || 'Search term...';
    $('input').attr('placeholder', placeholder);
  });
});

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

<select class="form-control " id="tipo" name="tipo" required>
  <option value="" selected disabled>Selecione o Tipo</option>
  <option value="cafe">Cafe</option>
  <option value="detergente">Detergente</option>
  <option value="refrigerante">Refrigerante</option>
</select>

<input type="text" class="form-control" name="x" placeholder="Search term...">