[ad_1]
拝啓
ドロップダウンをバインドし、ボタンをクリックするとdivとボタンを取得し、jqueryを使用して4つのコントロールを開くコードを作成するので、jqueryに追加するときに動的ドロップダウンリストをバインドする方法を知りたい
私はmvcでドロップダウンリストを強くタイプするのと同じドロップダウンをバインドしたい
助けてください
私が試したこと：
@Html.DropDownListFor(x => x.Source, new SelectList(Model.SourceList, "Code", "Text"), "Select", new { @id = "ddlSourceId", @class = "form-control" }) <div id="DynamicControl"> </div> <div class="col-sm-2"> <div class="form-group"> </div> </div> function AddDynamicControl() { debugger; $("#DynamicControl").append ('<div class="col-sm-3"><div class="form-group">Source<div class="col-sm-5"></div></div></div><div class="col-sm-3"><div class="form-group">Destination <div class="col-sm-9" style="padding-left: 35px"> <div class="col-sm-2"><div class="form-group">STD<div class="col-sm-9"><span class="glyphicon glyphicon-calendar"></span></div></div></div></div></div></div><div class="col-sm-2"><div class="form-group">DateTime<div class="col-sm-9" style="padding-left: 35px"><span class="glyphicon glyphicon-calendar"></span></div></div></div>'); };
解決策 1
mvcコントローラーとアクションへのjquery ajax呼び出しを使用して、ドロップダウンリストを動的にバインドできます。
htmlフィールドを作るだけ
最初のドロップダウン変更イベントで ajax コードを呼び出します。
JavaScript
$('#firstDD').on('change',funtion(){ var id=$(this).val(); $.ajax({ method:'Post', url:'@Url.Action("Action","Controller")', data:id, datatype:'json', success:function(res){ var op=''; if(res.length>0){ <pre>$.each(res, function(k, v) { op +='<option value="'+k.value+'">'+k.text+'</option>'; });
$('#dd').empty();
$(‘#dd’).append(op);
}
}
});
});
解決策 2
@Html.DropDownListFor(x => x.Source, new SelectList(Model.SourceList, "Code", "Text"), "Select", new { @id = "ddlSourceId", @class = "form-control" }) <div id="DynamicControl"> </div> <div class="col-sm-2"> <div class="form-group"> </div> </div> function AddDynamicControl() { debugger; $("#DynamicControl").append ('<div class="col-sm-3"><div class="form-group">Source<div class="col-sm-5"></div></div></div><div class="col-sm-3"><div class="form-group">Destination <div class="col-sm-9" style="padding-left: 35px"> <div class="col-sm-2"><div class="form-group">STD<div class="col-sm-9"></div></div></div></div></div></div><div class="col-sm-2"><div class="form-group">DateTime<div class="col-sm-9" style="padding-left: 35px"></div></div></div>'); };
[ad_2]
コメント