Add mask from a select

Question

Good morning, I’m trying to add a mask to Cpf from a select, but I’m not getting it.

HTML

<select class="form-control" id="select" style="width:100px;" title="Escolha..." name="select"> 
    <option>Escolha...</option>             
    <option value="user_nome">Nome</option>
    <option value="user_cpf">CPF</option>
    <option value="user_email">Email</option>
    <option value="user_loja">Loja</option>
</select>

<input type="text" id="busca" class="form-control" placeholder="Digite sua busca" name="busca" style="width:250px;">

jQuery:

var $select = $('#select option:selected').val();
if( $select == "CPF") {
    var $busca = $('#busca');
    $busca.mask('999.999.999-99');
}

Answer 1

Note that the value of the CPF option is not "CPF".

<option value="user_cpf">CPF</option>

Emphasis in:

value="user_cpf"

You need to change your value comparison to:

if( $select == "user_cpf") {

Answer 2

Good you need to put an event in select to call its function when the select is changed. Another thing you are doing wrong is in comparing the if, because you have to compare with the value of option ("user_cpf") and not with "CPF";

document.getElementById("select").addEventListener("change", myFunction);
function myFunction(){
	var $select = $('#select option:selected').val();
  if( $select == "user_cpf"){
  var $busca = $('#busca');
  $('#busca').mask('999.999.999-99');
  }
}

<select class="form-control" id="select" style="width:100px;" title="Escolha..." name="select"> 
            <option>Escolha...</option>             
            <option value="user_nome">Nome</option>
            <option value="user_cpf">CPF</option>
            <option value="user_email">Email</option>
            <option value="user_loja">Loja</option>
        </select>

    <input type="text" id="busca" class="form-control" placeholder="Digite sua busca" name="busca" style="width:250px;">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.min.js"></script>

Answer 3

Complementing the @Jessika response, follows an alternative using the function change() of jquery itself.

*Note that it is necessary to use the Mask plugin jquery
*The method unmask() removes the field mask if it is not CPF.

$("#select").change(function() {
  addMaskToInput();
});

function addMaskToInput() {
  var $select = $('#select option:selected').val();
  var $busca = $('#busca');
  if ($select == "user_cpf") {
    $busca.mask('999.999.999-99');
  } else {
    $busca.unmask();
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js">
</script>
<select class="form-control" id="select" style="width:100px;" title="Escolha..." name="select"> 
    <option>Escolha...</option>             
    <option value="user_nome">Nome</option>
    <option value="user_cpf">CPF</option>
    <option value="user_email">Email</option>
    <option value="user_loja">Loja</option>
</select>

<input type="text" id="busca" class="form-control" placeholder="Digite sua busca" name="busca" style="width:250px;">

Answer 4

Create an object to map the masks. And then you can use it like this:

var mascaras = {
  user_cpf: '999.999.999-99',
  // aqui podes ter mais campos
}

$('#select').on('change', function() {
  var mask = mascaras[this.value];
  if (mask) $('#busca').mask(mask);
  else $('#busca').unmask();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.10/jquery.mask.js"></script>
<select class="form-control" id="select" style="width:100px;" title="Escolha..." name="select"> 
    <option>Escolha...</option>             
    <option value="user_nome">Nome</option>
    <option value="user_cpf">CPF</option>
    <option value="user_email">Email</option>
    <option value="user_loja">Loja</option>
</select>

<input type="text" id="busca" class="form-control" placeholder="Digite sua busca" name="busca" style="width:250px;">