動態填充SELECT輸入與基於日期的jQuery

Question

這是我在這裏問的第一個問題，看起來像一個驚人的社區。

上的好東西：

我不得不從一個（壞）CMS包含在一組段輸出的數據填充選擇輸入。我從段落中的鏈接拉出文本節點和屬性節點，然後根據文件的年份將這些值附加到不同的<select>框。

下面是我在做什麼：

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(); 

這是工作，但你可以想像它不是非常擴展或未來因爲我將不得不添加更多<select>標籤與正確的ID，然後編輯噸他明年寫劇本。

我的問題是，我怎樣才能使這個腳本更好？我想動態創建所需的<select>標記，並根據年份爲其分配適當的ID，然後將正確的文件附加到正確的<select>。在這個階段，我的JS/jQuery知識太有限了，因此我無法理解如何做到這一點。任何幫助將不勝感激！

在此先感謝！

Answer 1

如果你給你的內容，你的選擇稱爲「年」的屬性：

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

然後在每一個功能，你可以讀它，發現選擇適合於這個項目：

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

這是我實現它的方式，你仍然可以根據元素內的文本找到你的選擇，但不是很可靠。

Answer 2

我會改變它，以便<select>元素本身是由jQuery的創建，以及基於存在的不同歲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); 
}); 

這樣你就不必擔心增加更多選擇何時添加來自另一年的項目。 Ofcourse，該選擇會在訂單中創建的不同年前存在於literature-container S，所以如果列表中的變化順序，選擇順序還不如......

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); 
});