0
I have a select that when changing to a certain value you should remove the class
col-md-9 and add the class col-md-4 to fit a new field on the screen.
He should stand as the example.
But when I change to the desired select it has no effect.
The strange thing is that I do the same with another field (when put in another value of select) and it works normally (being done in the same way, changing the name of the obvious fields).
$(document).ready(function () {
$('#input-produto').change(function () {
matricula_produto();
});
function matricula_produto() {
let val = $('#inputs_socios option:selected').attr('pcasal');
if (val == 1) {
$('.input-produto').addClass('col-md-4').removeClass('col-md-12');
$('.input-vinculo').insertAfter($('.input-produto')).show();
} else {
$('.input-produto').addClass('col-md-12').removeClass('col-md-4');
$('.input-vinculo').hide();
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="form-group input-produto col-md-12">
<label for="inputs_socios">Produto*</label>
<select name="inputs_socios" id="inputs_socios" class="form-control">
<option value="">Escolha</option>
<option pcasal="0">SÓCIO 1</option>
<option pcasal="1">MUDAR</option>
<option pcasal="0">SÓCIO 3</option>
</select>
</div>
<div class="form-group col-md-6 input-vinculo" style="display:none">
<label for="seq_vinculo">Vinculado</label>
<select name="seq_vinculo" id="seq_vinculo" class="form-control">
<option pcasal="0">TESTE</option>
<option pcasal="1">TESTE2</option>
<option pcasal="0">TESTE3</option>
</select>
</div>If I turn the remote $('.input-produto').addClass('col-md-4').removeClass('col-md-9'); on the console it works, but it is not running at the time it needs to. But the other value is. And it is entering the if as the field is appearing, just not adding and removing the class.
Can you build a [mcve] to demonstrate the problem? The site’s Snippet has the option to add jQuery.
– Woss
@Andersoncarloswoss I added the snippet.
– Guilherme Rigotti
William, this jQuery code shouldn’t be inside an event, like
change, of<select>? The way it is will be executed when the page loads, not when the value is changed.– Woss
In the code it is inside a function that checks every time it is changed. So much so that as I mentioned in the post another field that is practically a Ctrl+c Ctrl+v has the expected behavior with this code.
– Guilherme Rigotti
And if I copy the code and paste it into the console it works as it should.
– Guilherme Rigotti
Then add this excerpt also to the example, otherwise it will not accurately reproduce your problem.
– Woss
It is not possible to add this because the function is too large, and calls other functions that ends up getting confused to add only that part.
– Guilherme Rigotti
William, but that’s exactly what the MCVE is for. By making an example that reproduces the error, you ensure that the error is in the code you presented to us. To say that it is not possible to reproduce because there is a lot of code that is not in the question opens up a huge margin for the error to be precisely in the part you omitted. If the minimum example (as shown in the answer) works, then surely the error is in some other part of the code, which makes your question insufficiently clear and impossible to answer.
– Woss
The code itself pertaining to this is just a change.
– Guilherme Rigotti
Then add the part that deals with the event
changein the question to elaborate the necessary [mcve].– Woss
I just added .
– Guilherme Rigotti