[英]Appending options to select using JQuery
我有兩個選擇下拉菜單,其中第二個選擇框的選項需要根據第一個選擇進行更改。 形式是
<form action="" method="post" >
<div style="padding-bottom:6px;">
<select id="portfolios" name="portfolio" style="width: 200px; height:25px;">
<option selected="selected" value="default">Select Portfolio</option>
{% for portfolio in portfolios %}
<option get-groups="{{ path('v2_pm_patents_getgroups') }}" value={{ portfolio.id }}>{{ portfolio.portfolioName }}</option>
{% endfor %}
</select>
<span>OR</span>
<a class="modalbox1" href="#inline1">[Add New Portfolio]</a>
</div>
<div style="padding-bottom:6px; display:none;" id="groups">
<select id="portfolio-groups" name="portfolio-groups" style="width:200px; height:25px;">
<option selected="selected" value="default">Select Portfolio Group</option>
</select>
<span> OR</span>
<a class="modalbox2" href="#inline2">[Add New Group]</a>
</div>
</form>
最初,當我從第一個選擇中選擇一個選項時,第二個下拉菜單將隱藏。 我寫的jQuery是
<script>
$(document).ready(function(){
$('#portfolios').change(function() {
$('#groups').show();
var id = $("#portfolios").val();
var url = $('option:selected', this).attr("get-groups");
var data = {PID:id};
$.getJSON(url, data, function(result) {
var options = $("#portfolio-groups");
$.each(result, function(item) {
options.append($("<option />").val(item.id).text(item.name));
});
});
});
});
</script>
我調用的Controller方法是
public function getgroupsAction(Request $request){
if ($request->isXmlHttpRequest()) {
$id = $request->get("PID");
$em = $this->getDoctrine()->getEntityManager();
$portfolio_groups = $em->getRepository('MunichInnovationGroupPatentBundle:PmPatentgroups')
->getpatentgroups($id);
echo json_encode($portfolio_groups);
return new Response();
}
}
我從查詢和JSon Object中獲得了正確的組。 響應中的對象看起來像
[{"id":"09c0d4b2-ac25-11e1-96a5-9787dec335c2","name":"Group 2","description":"No Description Provided for this Group","order":500000,"is_deleted":false}]
在我的JQuery中,我附加了選擇框選項,但問題是它附加了選項,但屬性值為空且沒有文本。 因此,文本和value屬性都不可見,只是添加了空選項。
我做錯了什么? 以及如何在附加選項之前清除選擇框?
提前致謝
在這種情況下,您不能使用.val()
。 您必須使用.attr("value",item.id)
$("#mSelect").append($("<option />").val('1').text('-- Select --'));
var myOptions = response.d;
var mySelect = $("#MainContent_ddlnewType");
mySelect.children().remove();
//mySelect.append($("<option>").val("00").text("-- Select Type --"));
for (var i = 0; i < myOptions.length; i++) {
var val = myOptions[i].Id;
var text = myOptions[i].Name;
mySelect.append($("<option>").val(val).text(text));
}
看起來您正在將JSON響應包裝在數組中。 嘗試訪問$.each
的元素,例如item[0].name
和item[0].id
然后,您需要考慮獲取多個對象並遍歷item數組
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.