Standardoption onChange-Ereignis des ausgewählten Elements entfernen?

Question

Ich habe zwei HTML-Select-Elemente in einem Formular. Im aktuellen Setup wird die Standardoption für beide Selects aus der Datenbank eingelesen.

Wenn sich das ausgewählte Element in einer Auswahl ändert, möchte ich die Standardoption von diesem Element entfernen, nicht von anderen.

Das Problem im Moment ist, dass, wenn ich das ausgewählte Element in einem Select ändern, die Standardoption von beide Selects entfernt wird. Es sollte nur aus dem Steuerelement entfernt werden, das das Änderungsereignis auslöst.

Ich habe auch versucht, $('option:selected', this).remove(); für jedes unabhängige Änderungsereignis zu verwenden. Dieser Code entfernt jedoch bei jeder Änderung ein Element aus der Auswahl. Wo der Anwendungsfall nur das Entfernen der Standardoption erfordert.

Wie können Sie die Standardoption nur des ausgewählten Elements entfernen?

So im Markup I definierte zwei Auswahl Elemente mit IDs EventName und Status:

       <!-- SELECT STATUS STATIC--> 
           <div class="form-group"> 
            <label class="col-md-9 control-label" style="text-align: left;" for="Current Status">Current Status</label> 
            <div class="col-md-4"> 
             <select id="Status" name="Status" style="width:165px;" class="btn btn-default"> 
              @foreach (Models.RecStatus status in Model.Status) 
              { 
               <option value="@status.RecStatus">@status.RecStatus</option> 
              } 
             </select> 
            </div> 
           </div> 


           <!-- SELECT EVENT STATIC--> 
           <div class="form-group"> 
            <label class="col-md-9 control-label" style="text-align: left;" for="Event">Event</label> 
            <div class="col-md-4"> 
             <select id="EventName" name="EventName" style="width:165px;" class="btn btn-default"> 
              @foreach (Models.RecEvent eventType in Model.Event) 
              { 
               <option value="@eventType.EventType">@eventType.EventType</option> 
              } 
             </select> 
            </div> 
           </div> 


//Remove the extra default Event and Status select elements 
//onChange 
$('#EventName').on('change', function() { 
    //$('option:selected', this).remove(); 
    $("#defaultOption").remove(); 
}); 



$('#Status').on('change', function() { 
    //$('option:selected', this).remove(); 
    $("#defaultOption").remove(); 
}); 

Answer 1

man kann sich basierend auf ihrem Wert

$('#EventName').one('change', function() { 
    $(this).find("option[value='']").remove(); 
} 

oder man könnte die letzte Option

entfernen entfernen

$('#EventName').one('change', function() { 
    $(this).find('option:last').remove(); 
}