2016-11-07 5 views
0

Ich brauche das Element dynamisch Typen und ist unten zu ändern, wie ich es tue:Schalterelementtypen, sondern halte die gleiche IDs

$(function() { 
 
    $('.click_me').click(function(ev) { 
 
    var condition_value_1 = $('#condition_value_1'); 
 
    var select_html = '<select name="condition_value_1" id="condition_value_1"></select>'; 
 
    condition_value_1.after().html(select_html); 
 
    condition_value_1.remove(); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<input type="text" id="condition_value_1"> 
 
<span class="click_me">Click Me</span>

Nach Änderung der Typen, wie Sie auf dem sehen Schnipsel oben sollte ich das vorherige Element entfernen, aber weil sie die gleiche ID teilen (und das ist obligatorisch), dann wird das neue SELECT gelöscht. Gibt es eine Möglichkeit, dies zu vermeiden?

+1

'teilen sie (und das ist obligatorisch) die gleiche ID' Warum ist es obligatorisch? Es ist ein ungültiger HTML-Code und verursacht Probleme mit JS (wie Sie festgestellt haben), wenn Sie die Attribute 'ID' wiederholt haben. Sie sollten stattdessen jede "Eingabe"/"Auswahl" ersetzen, wenn Sie sie stattdessen wechseln. –

+0

@RoryMcCrossan nein, es wird keine Probleme verursachen, weil die Idee ist, die EINGABE in eine SELECT einschalten und es ist obligatorisch, denn wenn ich den Wert ändere, könnte ich mich auf viel Code auf der Backend-Seite beziehen, damit dies wieder funktioniert – ReynierPM

+1

Name Attribut anstelle der ID zu löschen –

Antwort

5

Wenn Sie ersetzen möchten, können Sie replaceWith verwenden ..

$(function() { 
 
    $('.click_me').click(function(ev) { 
 
    var condition_value_1 = $('#condition_value_1'); 
 
    var select_html = '<select name="condition_value_1" id="condition_value_1"></select>'; 
 
    condition_value_1.replaceWith(select_html); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
 
<input type="text" id="condition_value_1"> 
 
<span class="click_me">Click Me</span>

+0

Ohhh dieses ist noch besser, danke – ReynierPM

+0

Ja, Sie verdienen es –

1

den Attributnamen anstelle der ID verwenden

$(function() { 
    $('.click_me').click(function(ev) { 
    var condition_value_1 = $('#condition_value_1'); 
    var select_html = '<select name="condition_value_1" id="condition_value_1"></select>'; 
    condition_value_1.after().html(select_html); 
    $('[name="ElementNameHere"]')[0].remove(); 
    }); 
}); 

beachten Sie, dass dieser Wille löschen Löschen Sie nur den ersten Eintrag, in den es beim Durchsuchen des DOM gelangt.

Verwandte Themen