我建立了一个3个相互依存的选择列表使用HTMX,(国家地区城镇),我设法获取选定的城镇,因为我有这个在最后一部分
<select id="localidades" class="form-control-sm custom-select "
name="town"
hx-get="{% url 'query_for_properties' %}"
hx-trigger="change"
hx-target="#response"
required>
<option value="">Select municipality</option>
{% for z in lista_localidades %}
<option value="{{z}}">{{z}}</option>
{% endfor %}
</select>`
在这里,我获取它的权利(注意,我调用这个函数从上面的片段)
def query_for_properties(request):
town = request.GET.get('town')
etc
因为我需要下一个代码的城镇值。然而,接下来的代码需要将值发送到不同的目标,并为每个目标发送不同的值,例如,汽车数量,自行车数量等到不同的选择器。这就是我卡住的地方。htmx文档,像往常一样,只适用于非常简单的场景,但如果你需要其他东西,你就完蛋了,搁浅了。我不知道如何对不同的目标分配不同的价值观。
所以,我尝试 AJAX ,使用jquery很容易为每个选择器构建调用。然而,因为我用htmx构建了相互依赖的选择列表 AJAX 查询不能得到值。开始了
<script>
$(document).ready(function(){
$("#localidades").on({
change: function(){
var ciudad = $('#localidades').val();
alert(ciudad);
$.ajax({
url: 'testing',
type: "GET",
'success': function(data) {
$('#store').html(data);
}
}); // close ajax function
$("#house").css("background-color", "lightgray");
$.ajax({
url: 'housecount',
type: "GET",
'success': function(data) {
$('#house').html(data);
}
}); // close ajax function
$("#store").css("background-color", "lightblue")
$("#response").css("background-color", "yellow");
},
});
});
</script>`
当我试图提醒值时,我什么也没有得到,空的。
然而,因为第一个选择列表是这样构建的:
def index_country(request):
country = Address.objects.distinct('country')
print(country)
return render(request, 'index.html',{'country':country})
<select id="paises" class="form-control-sm custom-select" required
name="country"
hx-get="{% url 'index_regiones' %}"
hx-trigger="change"
hx-target="#regiones">
<option value="">Select country</option>
{% for x in country %}
<option value="{{x.country}}">{{x.country}}</option>
{% endfor %}
</select>
var pais = $('#paises').瓦尔(); return();
但它并不像我在开始时提到和展示的那样为localidades带来好处。
我先尝试htmx获取值,我做到了,但后来我不知道如何将结果发送到不同的目标,所以太复杂了
AJAX 则相反,我可以处理不同的选择器调用,但我不能获取第一个初始值。
1条答案
按热度按时间flseospp1#
我的诊断并不正确,所以我也没有提到我的问题。
那些国家、地区、城镇的代码片段实际上被注入了主页。但结果是选择列表的id与它注入自身的div的id相同。因此,选择器值被吓坏了,不知道该附加到哪个性别身份。我指示它不能有一个实体有两个性别,所以我改了名字,问题就解决了。