我有两个选择下拉菜单,其中第二个选择框的选项需要根据第一个选择进行更改。形式为
<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>
我调用的控制器方法是
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对象中获得了正确的组。响应的对象看起来像
[{"id":"09c0d4b2-ac25-11e1-96a5-9787dec335c2","name":"Group 2","description":"No Description Provided for this Group","order":500000,"is_deleted":false}]
在我的JQuery中,我将选项附加到选择框中,但问题是它附加了选项,但带有空值atribute,没有文本。因此,文本和值属性都不可见,只是添加了空选项。
我做错了什么?以及在附加选项之前如何清除选择框?
提前感谢
看起来您正在将JSON响应封装在一个数组中。尝试访问$.each
中的元素,如item[0].name
和item[0].id
然后,您需要考虑获得多个对象,并在项目数组上循环
在这种情况下不能使用.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));
}