What I'm looking for is that, when I click on one of the options of the select, it tells me if it is selected or it is not already selected, when I deselect an option of the three the following code tells me that if it is selected, but in I really deselected it, and in that case I should say that it is not selected. The code only works with the last option, that is, when only one option is selected, and previously deselect the two, if it works very well and it tells me to select or deselect if it is selected or not ... but what I'm looking for is a way that each option of the select tells me if it is selected or not. I have tried many ways consulting and I have not been able to solve it. Thank you very much if you can help me.
$('#sautores').on('changed.bs.select', function (e) {
if ($("#sautores option[name='"+nombres+"']").prop("selected") == true) {
alert("Si esta seleccionado");
} else {
alert("No esta seleccionado");
}
});
EDITED:
This is my code, including the html, what I intend is that when selecting an author, the Identification, Speakers, Email, Telephone fields are automatically completed, and when the author is deselected, the data that had been added to the the fields (Identification, Speakers, Email, Telephone) I hope you can help me:
<script> $('#sautores').on('changed.bs.select', function (e) {
var option=$('#ponen option').length;
if(option<=3){
var a=$('#sautores').val();
var s = a.toString();
var count = s.split(";").length;
var res = s.split(";");
if(count==2){
var per=res[1].split(",");
}else{
if(count==3){
var per=res[2].split(",");
}else{
if(count==4){
var per=res[3].split(",");
}
}
}
var nombres=per[0];
var iden=per[1];
var email=per[2];
var tel=per[3];
$("#sautores option[name='"+nombres+"']").each(function(){
if ($(this).prop("selected") == true) {
$("#ponen").append("<option value='"+nombres+"' >"+nombres+"</option>");
$("#iden").val($("#iden").val()+", "+iden);
$("#email").val($("#email").val()+", "+email);
$("#tel").val($("#tel").val()+", "+tel);
$('#ponen').selectpicker('refresh');
} else {
alert("No esta seleccionado");
}
});
}
});
</script> <div class="form-group" align="left">
<label for="autores">Autores:</label>
-------------------------------------------------->>>>>>>
<p>Si hay más autores, ingresa el código y seleccionalo, (Máx. 3 personas).</p>
<select id="sautores" class="selectpicker form-control" data-size="3" data-live-search="true" data-max-options="3" name="autores[]" multiple>
{% for personalesr in personales %}
<option value="{{personalesr.nombres}}" selected>{{personalesr.nombres}}</option>
{% for codigosr in codigos %}
{%if (personalesr.nombres != codigosr.nombres)%}
<option value=";{{codigosr.nombres}},{{codigosr.numero_documento}},{{codigosr.email}},{{codigosr.telefono}}" name="{{codigosr.nombres}}" data-tokens="{{codigosr.codigo_identificacion}}">{{codigosr.nombres}}</option>
{%endif%}
{% endfor %}
{% endfor %}
</select>
</div>
<div class="form-group" align="left">
<label for="iden">Identificación:</label>
{% for personalesr in personales %}
<input type="text" class="form-control" value="{{personalesr.numero_documento}}" name="iden" id="iden" readonly>
{% endfor %}
</div>
<div class="form-group" align="left">
<label for="ponen">Ponentes:</label>
<p>(Máx. 2 personas).</p>
<select class="selectpicker form-control" name="ponen[]" data-max-options="2" required id="ponen" multiple>
<option disabled value=" ">Seleccione ponentes...</option>
{% for personalesr in personales %}
<option value="{{personalesr.nombres}}" selected>{{personalesr.nombres}}</option>
{% endfor %}
</select>
</div>
<div class="form-group" align="left">
<label for="email">Email de Contacto:</label>
{% for personalesr in personales %}
<input type="text" class="form-control" value="{{personalesr.email}}" name="email" id="email" readonly>
{% endfor %}
</div>
<div class="form-group" align="left">
<label for="tel">Teléfonos de Contacto:</label>
{% for personalesr in personales %}
<input type="text" class="form-control" value="{{personalesr.telefono}}" name="tel" id="tel" readonly>
{% endfor %}
<!--<input type="number" class="form-control" placeholder="Teléfonos de Contacto" name="tel" required>-->
</div>