Remplir dynamiquement SELECT input avec jQuery basé sur la date

Question

c'est ma première question posée ici, semble être une communauté incroyable.

sur les bonnes choses:

Je vais avoir à remplir les entrées de sélection à partir des données contenues dans un ensemble de sortie paragraphes par un (mauvais) CMS. Je tire le noeud de texte et le noeud d'attribut d'un lien dans le paragraphe, puis j'ajoute ces valeurs à différentes cases <select> en fonction de l'année d'origine du fichier.

Voici ce que je fais:

HTML

<p class="literature-container"><a href="/url/to/file.pdf">2009-01 - Statistics</a></p> 
<p class="literature-container"><a href="/url/to/file.pdf">2010-01 - Statistics</a></p> 
<p class="literature-container"><a href="/url/to/file.pdf">2011-01 - Statistics</a></p> 

JS

// Get Paragraph data 

function getLitData(){ 

    var itemContent; 
    var itemURL; 
    var optionFormat; 
    var fileYear; 

    $('.literature-container').each(function() { 
     itemContent = $(this).text(); 
     itemURL = $(this).find('a').attr("href"); 
     fileYear = itemContent.charAt(3); 

     optionFormat = '<option ' + 'title="' + itemURL + '">' + itemContent + '</option>'; 

     if(fileYear == 9) { 

      $("#statistics_literature_09").append(optionFormat); 

     } else if(fileYear == 0) { 

      $("#statistics_literature_10").append(optionFormat); 

     } else if(fileYear == 1) { 

      $("#statistics_literature_11").append(optionFormat); 

     } 

    }); 


}; 

getLitData(); 

Cela fonctionne, mais comme vous pouvez l'imaginer est pas très extensible ou future -préparable, car je devrai ajouter plus de tags <select> avec les IDs appropriés, puis éditer t Il script l'année prochaine.

Ma question est, comment puis-je améliorer ce script? Je voudrais l'avoir créer dynamiquement le tag <select> requis et lui attribuer l'ID approprié en fonction de l'année, puis ajouter les fichiers corrects à la bonne <select>. Mes connaissances JS/jQuery sont trop limitées à ce stade pour comprendre comment faire. Toute aide serait grandement appréciée!

Merci d'avance!

Answer 1

si votre donner à vos éléments et vos sélectionne un attribut appelé « Année »:

<p class="literature-container" year='2011'>... 
<select id="statistics_literature_09" year='2011'> 

alors dans votre chaque fonction que vous pouvez lire et trouver la sélection qui convient pour cet article:

var year = $(this).attr("year"); 
var select = $("select[year="+year+"]"); 
select.append(... 

C'est ainsi que je l'implémenterais, vous pouvez toujours trouver vos sélections basées sur le texte à l'intérieur de vos éléments, mais pas très fiable.

Answer 2

je changer pour que eux-mêmes sont créés par des éléments jQuery <select> ainsi, sur la base des différentes années présentes dans literature-container:

$('.literature-container').each(function() { 
    itemContent = $(this).text(); 
    itemURL = $(this).find('a').attr("href"); 
    fileYear = itemContent.substr(0, 4); 

    optionFormat = '<option ' + 'title="' + itemURL + '">' + itemContent + '</option>'; 

    // get the select, create it and append to body if it's not present 
    var $sel = $("#statistics_literature_"+fileYear); 
    if(!$sel.length) { 
     $sel = $("<select id='statistics_literature_"+fileYear+"'><option value='selected'>Please Select a Statistics File:</option></select>").appendTo($('body')); 
    } 

    // add the option to the select 
    $sel.append(optionFormat); 
}); 

De cette façon, vous ne serez pas à vous soucier d'ajouter plus sélectionne quand des éléments d'une autre année sont ajoutés plus tard. Ofcourse, Selects seront créés dans l'ordre des années distinctes sont présentes dans les literature-container s, donc si l'ordre des modifications de la liste, l'ordre des Selects pourrait aussi bien ...

Answer 3

$('.literature-container a').each(function() { 
    var $a = $(this); 

    var text = $a.text(); 
    var re = /^([0-9]{4}).*- (.*?[0-9]{4})$/; 
    var matches = re.exec(text); 
    var year = matches[1]; 
    var display = matches[2]; 

    var $select = $('#statistics_literature_'+year); 
    if ($select.length == 0) { 
     $select = $('<select id="#statistics_literature_'+year+'"></select>'); 
     $($('body')[0]).append($select); 
    } 

    $option = $('<option value="'+$a.attr('href')+'">'+display+'</option>'); 
    $select.append($option); 
});