`HTML:
`{% csrf_token %} {{ form | crispy }}
<select id="id_cliente" name="cliente" onchange="update_cliente_data()">
<option value="">Selecione um cliente...</option>
{% for cliente in clientes %}
{% with cliente_data=cliente.to_json %}
<option id="opcao" value="{{ cliente.id }}" data-cliente="{% for key, value in cliente_data.items %}'{{ key }}': '{{ value|escapejs }}',{% endfor %}">{{ cliente.nome }}</option>
{% endwith %}
{% endfor %}
</select>`
SCRIPT:
`<script>
// Chamar a função update_cliente_data() quando o DOM é carregado
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM carregado.');
update_cliente_data();
});
function update_cliente_data() {
var clienteSelect = document.getElementById('id_cliente');
if (clienteSelect) {
var selectedIndex = clienteSelect.selectedIndex;
if (selectedIndex !== -1) {
var clienteOption = clienteSelect.options[selectedIndex];
//var clienteOpcao = document.getElementById('opcao');
var clienteDataAttr = clienteOption.getAttribute('data-cliente');
//var clienteDataAttr = clienteOpcao.getAttribute('data-cliente');
if (clienteDataAttr) {
try {
var clienteData = JSON.parse(clienteDataAttr);
document.getElementById('id_nome').value = clienteData.nome;
document.getElementById('id_cpf').value = clienteData.cpf;
document.getElementById('id_email').value = clienteData.email;
document.getElementById('id_rg').value = clienteData.rg;
document.getElementById('id_cidade').value = clienteData.cidade;
document.getElementById('id_telefone').value = clienteData.telefone;
document.getElementById('id_numero').value = clienteData.numero;
document.getElementById('id_rua').value = clienteData.rua;
document.getElementById('id_bairro').value = clienteData.bairro;
} catch (error) {
console.error('Erro ao analisar os dados do cliente:', error);
}
} else {
console.error('Atributo "data-cliente" não encontrado no elemento selecionado.');
}
} else {
console.error('Nenhum item selecionado no select.');
}
} else {
console.error('Elemento com ID "id_cliente" não encontrado no DOM.');
}
}
</script>``字符串
这一切似乎对我来说是正确的，但属性'数据客户端'是不是beeing发现的控制台，有人可以帮助我吗？这是一个大学项目，非常重要。对不起，葡萄牙的评论和变量顺便说一句
1条答案
按热度按时间6l7fqoea1#
这里是工作的example，只要确保您的结果html相同。
你的Django模板有一个小问题，它阻止了属性'data-cliente'被正确识别。在for循环中，序列化了一个JSON对象，但没有正确地关闭JSON对象。
这部分代码：
字符串
正在输出以下内容（示例）：
型
问题是你的JSON对象格式不正确，缺少左括号
{和右括号}。以下是更正的版本：
型
但是，上面的版本仍然可能会产生一个问题，因为最后一项末尾的逗号。为了避免这种情况，您可以以稍微不同的方式构建JSON对象。您应该考虑使用Django提供的
json_script过滤器在HTML中输出安全的JSON。这是你可以做到的：
型
如果没有加载，请确保在模板中加载
static和escapejs过滤器：型
最后，不要忘记在JavaScript代码中解析这个'data-cliente'属性值，因为它是一个字符串化的JSON对象：
型
请确保您在Django模板中使用的
to_json方法确实提供了字典，因为json_script需要它。让我知道这是否有帮助，或者如果你有任何其他问题！