您好,我正在尝试将基于输入的选项附加到选择标签。但选项没有附加。我什至没有收到错误,所以无法理解故障在哪里。
HTML
<div class="col-lg-5">
<div class="input-group">
<label>Select type of Graph</label>
<select data-placeholder="Select Field..." id="graph_name" style="width:300px;" name="team_name" class="chosen-select" tabindex="2">
</select>
</div>
</div>
jQuery:
$('#field_name').change(function() {
var fieldname = $('#field_name option:selected').val();
$.post('<?php echo BASE_URL . 'php/processing/formDashboard/graph/showPossibleGraphs.php?id=' . $_GET['id']; ?>', {fieldname: fieldname}, function(data) {
$.each(data.graphs, function(index, value) {
$.each(value, function(index, value) {
console.log(value.id);
console.log(value.text);
var option = '<option value="'+value.id+'">'+value.text+'</option>';
$('#graph_name').append(option);
});
});
});
});
这是截图
这是我从一个下拉列表中选择选项时的图像,数据来自 JSON 格式的脚本
这是 firebug 调试屏幕截图,显示正在附加数据,但点击后什么也没显示 我的样本数据是这样的:
sample data: {
"status":"OK",
"response":200,
"graphs":[[
{"id":"B","text":"Bar Chart"},
{"id":"D","text":"Doughnut Chart"},
{"id":"P","text":"Pie Chart"}
]]
}
最佳答案
EDIT Based on Chat
由于您正在动态形成select
,因此您必须触发所选的插件。
$('#graph_name').trigger("chosen:updated");
在附加选项后添加它。它会起作用
您正在尝试直接附加字符串。但是您必须附加 DOM 元素。
var option = '<option value="'+value.id+'">'+value.text+'</option>';
$('#graph_name').append(option);
一定是
var option = $('<option value="'+value.id+'">'+value.text+'</option>');
$('#graph_name').append(option);
更好的是,而不是在每次迭代时附加到 DOM 树。加载一个数组,然后在 select
中设置 html()。它将提高性能。
关于javascript - jQuery:尝试将选项附加到选择标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29714114/