Question

我正在尝试使用jQuery动态地将列表项附加到MVC DropDownListFor。不幸的是，当我运行代码时没有任何反应我已经使用console.log来仔细检查正在生成的html，它是。任何帮助，将不胜感激！

这是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>

Answer 1

http://jsfiddle.net/enbF7/4/ - 使用生成的cshtml更新了jsFiddle，现在可以使用了。班级＆＃39; clrDropDown＆＃39;拼写错了，拼写错误＆＃39; crlDropDown＆＃39;在生成的HTML中。

问题出在$ .each（）函数中......

看起来就像是如何格式化价值＆amp;文字进入<option> 另外我认为你的itemClass.append(<option>).val(val))＆lt; - 你在这里试图给itemClass一个值，因此它为什么会破坏

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

查看jsfiddle以查看它的实际效果，希望有所帮助！

Answer 2

虽然mcpDESIGNS的帖子有效（+1），但我认为他不想要一个已经可用的select。

我更新了他的小提琴，使用了一个新的修订版，但没有添加已预先存在的预先填充值的列表。

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

使用jQuery将列表项附加到MVC DropDownList

2 个答案: