Get

Ich habe diesen Code:Get

var i = 0; 
$('#jobs').change(function() { 
    var id = $(this).select2('data')[i].id; 
    var txt = $(this).select2('data')[i].text; 
    $('#jobSection').append('<fieldset><legend>' + txt + '</legend><input type="text" class="form-control" name="size_' + id + '" placeholder="Size"><br/><select class="form-control" name="type_' + id + '"><option>Type</option><option value="1">Type 1</option><option value="2">Type 2</option></select></fieldset>'); 
    i++ 
});

Mit, dass ich für jeden Tag zusätzliche Eingabefelder am anhängen.

Aber es funktioniert nur, wenn ich Tags auf Bestellung wähle, sonst dauert es vorherige Tag-Daten.

Ich verstehe, dass das Problem in i ist, weil dies nicht tatsächliche Schleife ist, sondern Ereignis ändern.
Also ich möchte wissen, wie man nur letzte Tag-Daten bei Änderung bekommen?

Voll Beispiel ist here

Quelle

2016-06-23 Space Peasant

die Dokumentation Anzeigen, sollte dies nicht in einem 'select' sein? – wmash

Ich weiß nicht, jquery, um den Code zu schreiben. Aber ich kann auf das Problem hinweisen. Ihre Daten $ (this) .select2 ('data') werden mit den Daten der Bestellung gefüllt. Es bedeutet, dass, wenn Sie Tags 3,4,1 wählen - Ihre Daten sind tatsächlich 1,3,4. Und Ihr "i" in diesem Moment ist 2 (erhöht 0 -> 1 -> 2 und wird am Ende 3 sein) und Sie haben den Wert 4 aus den Daten erhalten, während Sie das letzte Mal auf 1 geklickt haben. Also var i erhöht sich, aber Sie erhalten immer das größte Tag. UPD: Ja, dieser Code muss neu gestaltet werden. Wie GrigTheFirst in seiner Antwort erwähnt hat. –

var selectOption = [{ 
 
    "id": 1, 
 
    "text": "one" 
 
}, { 
 
    "id": 2, 
 
    "text": "two" 
 
}, { 
 
    "id": 3, 
 
    "text": "three" 
 
}, { 
 
    "id": 4, 
 
    "text": "four" 
 
}, { 
 
    "id": 5, 
 
    "text": "five" 
 
}]; 
 
$('#jobs').select2({ 
 
    tags: true, 
 
    multiple: true, 
 
    placeholder: 'Choose job...', 
 
    data: selectOption 
 
}); 
 

 
var selectOptionObj = {}; 
 
$.each(selectOption, function(i, v) { 
 
    selectOptionObj[v.id] = v; 
 
}); 
 

 
$('#jobs').change(function() { 
 
    var thisVal = $(this)[0].value.split(','); 
 
    var i = thisVal[thisVal.length - 1]; 
 
    var id = selectOptionObj[i].id; 
 
    var txt = selectOptionObj[i].text; 
 
    $('#jobSection').append('<fieldset><legend>' + txt + '</legend><input type="text" class="form-control" name="size_' + id + '" placeholder="Size"><br/><select class="form-control" name="type_' + id + '"><option>Type</option><option value="1">Type 1</option><option value="2">Type 2</option></select></fieldset>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.min.js"></script> 
 

 
<div id="jobSection"> 
 
    <input type="text" id="jobs"> 
 
</div>

Siehe: JSFiddle

Quelle

2016-06-23 12:35:25 zakhefron

Nur eine Anmerkung zu dieser Lösung, es funktioniert nur, wenn IDs von 1 auf Bestellung gehen. Wenn eine Nummer fehlt, dann schlägt es fehl. –

Überprüfen Sie einfach die aktualisierte JsFiddle [link] (https://jsfiddle.net/3urpdsn6/1/) – zakhefron

Ich glaube, Sie Ihre Anwendung neu gestalten sollen ganze #jobSelection Knoten jedes Mal, Auswahl neu zu erstellen, um aktuell ausgewählte Elemente geändert entsprechend. Auf diese Weise wird Ihre # jobSelection-Struktur immer aktualisiert.

Ich schaute Ereignisobjekt und fand keine Informationen über zuletzt ausgewählte Option. Sie müssen also mit dem aktuellen Status arbeiten und nicht mit Änderungen.

Wenn dies nicht die Option ist, können Sie den vorherigen Auswahlstatus immer in einer Variablen beibehalten und ihn bei jedem onChange-Ereignis mit dem aktuellen Status vergleichen. Aber ich denke, es ist nicht die beste Lösung für Ihr Problem.

Quelle

2016-06-23 12:02:43 GrigTheFirst

Antwort

Verwandte Themen