Chosen Select: append and remove items from a multiple select

Question

EDIT: I will explain my problem better:

I have a Select Multiple created with Jquery-plugin --> Chosen. I create the Options inside the Select with Ajax+Php+MySQL and this:

$("#Enmarcado").append(array_items[x]); //inside a loop
[...]
$("#Enmarcado").trigger("chosen:updated");

Now, with the Select created, I want validate which options you can select:

This is my select (html created by Ajax+Php+MySQL)

<select id="Enmarcado" name="Enmarcado" data-placeholder="Elije los acabados..." class="chosen-select" multiple="" onchange="validar_enmarcado();">
    <option selected="" value="-1">Sin Acabados</option>
    <option value="20">Kappa-fix 10mm (PVC)</option>
    <option value="19">Kappa-fix 5mm (PVC)</option>
    <option value="18">Laminado mate (75 micras producción)</option>
    <option value="17">Laminado brillo (75 micras producción)</option>
    <option value="16">Laminado mate (30-50 micras)</option>
    <option value="15">Laminado brillo (30-50 micras)</option>
    <option value="14">Plastificado brillo (125 micras)</option>
    <option value="13">Plastificado brillo (75 - 80 micras)</option>
    <option value="11">Adhesivado</option>
    <option value="7">Kappa-fix 10 mm (cartón pluma alta densidad)</option>
    <option value="6">Kappa-fix 5 mm (cartón pluma alta densidad)</option>
    <option value="5">Laminado Mate (proteccion uv)</option>
    <option value="4">Laminado Brillo (proteccion uv)</option>
    <option value="3">Aluminio</option>
    <option value="2">Bastidor 4 cm</option>
    <option value="1">Bastidor 2 cm</option>
    <option value="9">Dibond 3mm (sandwich aluminio + pvc)</option>
</select>

The first option is absolute: If you select it, it clears all other options.

<option selected="" value="-1">Sin Acabados</option>

But If I have this option selected, I want delete it, and leave the new selected option when I select another option:

<option selected="" value="-1">Sin Acabados</option> <!-- Selected yet -->
<option value="20">Kappa-fix 10mm (PVC)</option> <!-- I want select this, clearing value =-1 from the selected options. -->

My validation function:

EDIT2:

function validar_enmarcado(){
    var obj = document.getElementById ("Enmarcado");
    var enmarcado = new Array();

    var i = 0;
    var u = 0;
    var y = 0;
    var cont = 0;
    var opt1 = "";
    var opt2 = "";

    enmarcado = obj.selectedOptions;
    if(enmarcado.length>1){
        for (i=0; opt1=enmarcado[i];i++){
            for (u=i+1; opt2=enmarcado[u];u++){
                if(opt1.value == -1){
                    if(opt2.value >= 1){
                        $("#Enmarcado").chosen();
                        $("#Enmarcado").val(-1).trigger("chosen:updated");
                        jAlert("Si elige Sin Acabados, no puede haber acabados en la lista.","Error de Acabado");
                    }
                }
                if(opt1.value == 6 || opt1.value == 7 || opt1.value == 9 || opt1.value == 19 || opt1.value == 20){
                    if(opt2.value == 6 || opt2.value == 7 || opt2.value == 9 || opt2.value == 19 || opt2.value == 20){
                        jAlert("No puede elegir dos Soportes al mismo tiempo, elimino uno.","Error de Acabado");
                    }
                }
                if(opt1.value == 1 || opt1.value == 2){
                    if(opt2.value == 1 || opt2.value == 2){
                        jAlert("No puede elegir dos Bastidores al mismo tiempo, elimino uno.","Error de Acabado");
                    }
                }
                if(opt1.value == 4 || opt1.value == 5 || opt1.value == 13 || opt1.value == 14 || opt1.value == 15 || opt1.value == 16 || opt1.value == 17 || opt1.value == 18){
                    if(opt2.value == 4 || opt2.value == 5 || opt2.value == 13 || opt2.value == 14 || opt2.value == 15 || opt2.value == 16 || opt2.value == 17 || opt2.value == 18){
                        jAlert("No puede elegir dos Laminados o Plastificados al mismo tiempo, elimino uno.","Error de Acabado");
                    }
                }
            }
        }
    }
}

The problem is:

<option selected="" value="-1">Sin Acabados</option>

This is the default option, and I want to remove it when I select other option. But I dont know how to do it, without removing the other validations.

I cannot get the last option selected from the list of $("#Enmarcado").selectedOptions[] because a multiple select always reorder the selected items with the $("#Enmarcado").options[] order.

Thanks for your help!

EDIT3:

I just found a bit of code that give me the "selected option value":

$("#Enmarcado").chosen().change(function() {
    alert(+$(this).val());
});

But it sends me NaN when I select multiple options. Could anyone help to insert this in my validation function?

Response to this: delete the + before $(this).val() and it will send you an string with the selected values. But is not that I want: I need know WHICH option I just selected(or clicked).

Answer 1

I found the solution by using Google today:

var foo = [];
$('#EnmarcadoChosen :selected').each(function(i, selected){
    foo[i] = $(selected).text(); // you can get the .value() too, and compare it.
});

Answer 2

It could be as simple as: $("#Enmarcado option[value='-1']").remove();

But if the above doesn't work in your context, could you build on this answer by VirtualTroll? (If so, upvote his, too.) In your case, that could look like:

for (i=0; i<obj.length; i++) {
   if (obj.options[i].value=='-1') {
     obj.remove(i);
   }
}

And note a few gentler approaches, that might make it easier to turn the default back on, later:
1: $("#Enmarcado option[value='-1']").hide();
2: $("#Enmarcado option[value='-1']").attr('disabled','disabled');

UPDATE:

From your new comments below, it's now clear that you're not looking to "delete" or "remove" the option -- you're only looking to clear, or "unselect", the selection of the option. Though I did not know an answer to that, I do think I found answers to that. (Again, if this information works for you, please upvote their answers too.)

(1) Note Sudhir Kesharwani's solution here. I think his code clears all selections... so, attempting a variation of his code, would this shorthand version work?:

$("#Enmarcado option[value='-1']").removeAttr("selected");
$("#Enmarcado").trigger("chosen:updated");

And (2), you might find the documentation useful. In Joseph Silber's answer here, he refers to the documentation here, saying "(find the section titled Updating Chosen Dynamically)." It explains that you have to trigger chosen:updated after any selection changes.

I hope that helps...