2012-07-26 44 views
0

我想動態地將列表項添加到使用jQuery的MVC DropDownListFor。不幸的是,當我運行我的代碼時沒有任何反應我已經使用console.log來檢查正在生成的HTML,它是。任何幫助,將不勝感激!使用jQuery將列表項添加到MVC DropDownList

這裏是jQuery的

function formHelpers() { 
jQuery.fn.addDropDownValues = function (options) { 

    // Grab the class selector given to the function 
    var itemClass = $(this); 

    // Iterate through each element and value 
    $.each(options, function (val, text) { 
     itemClass.append("<option></option>").val(val).html(text); 
    }); 
    }; 

}; 

$(document).ready(function() { 
     formHelpers(); 
     $(".clrDropDown").addDropDownValues({Val1:"Yes", Val2:"No"}); 
    }); 

這是CSHTML

<div style="float:left;margin:0 10px 0 0;"> 
    <table class="ntiTable"> 
     <tbody> 

      <td nowrap class="ntiTableFirstColumn" title="This is the Crl Collaboration field."><div class="editor-label">@Html.LabelFor(m => m.myProject.CrlCollaboration)</div></td> 
      <td><div class="editor-field">@Html.DropDownListFor(model => model.myProject.CrlCollaboration, new SelectList(""), new { @class = "crlDropDown"})@Html.ValidationMessageFor(model => model.myProject.CrlCollaboration)</div></td> 

     </tbody> 
    </table> 
</div> 

生成CSHTML

<tr> 
      <td class="ntiTableFirstColumn" title="This is the Crl Collaboration field." nowrap="nowrap"><div class="editor-label"><label for="myProject_CrlCollaboration">Crl Collaboration</label></div></td> 
      <td><div class="editor-field"><select class="crlDropDown" data-val="true" data-val-length="The field Crl Collaboration must be a string with a maximum length of 10." data-val-length-max="10" id="myProject_CrlCollaboration" name="myProject.CrlCollaboration"></select><span class="field-validation-valid" data-valmsg-for="myProject.CrlCollaboration" data-valmsg-replace="true"></span></div></td> 
</tr> 
+0

+1 mcpDESIGNS答案。另外:我認爲你需要在$(document).ready(function(){})塊中包裝formHelpers(),因爲它也使用jQuery。 – Faust 2012-07-26 13:11:37

回答

3

http://jsfiddle.net/enbF7/4/ - 更新的jsfiddle與你產生CSHTML,現在的工作。類'clrDropDown'拼寫錯誤,它在生成的HTML中拼寫爲'crlDropDown'。

的問題是你的$。每()函數中...

看起來只是你如何格式化值&文成<option> 此外,我認爲你的itemClass.append(<option>).val(val)) < - 你能在這裏試圖給在itemClass時的值,因此它爲什麼被打破

$.each(options, function(value, text) { 
     itemClass 
      .append($('<option>', { value : value}) 
      .text(text)); 
    }); 

檢查出的jsfiddle看到它在行動,希望幫助!

+1

稍微縮短一點:.append($('

+0

@mcpDESIGNS我試過了你的代碼,但它不起作用 我生成的CSHTML有一點不同,我會在上面發帖 – 2012-07-26 13:35:10

+0

我把代碼粘貼在小提琴中,爲什麼它不能在我的項目中工作?這是鏈接[My Fiddle](http://jsfiddle.net/singularity/uWUFL/)@mcpDESIGNS – 2012-07-26 13:50:08

0

雖然由mcpDESIGNS發佈的作品(+1),我認爲他不希望已經有select

我更新了他的小提琴與一個新的修訂版,沒有添加一個已經存在的列表與prepopulated值相同。

http://jsfiddle.net/enbF7/2/

+0

那沒有用,我把我生成的CSHTML放在@DrColossos上面 – 2012-07-26 13:44:12

相關問題