从自定义HTML结果获取数据属性

Question

假设我有一个简单的DAL autocomplete和form呈现自定义html结果，其中结果包含数据属性。

from django.utils.html import format_html

class CountryAutocomplete(autocomplete.Select2QuerySetView):
    def get_result_label(self, item):
        return format_html('<span data-url="{}">{}</span>', item.get_dashboard_url(), item.name)


class CountryForm(forms.Form):
    country = forms.ModelChoiceField(
        queryset=Country.objects.all(),
        widget=autocomplete.ModelSelect2(
            url="country-autocomplete",
            attrs={
                "data-result-html": True,
            },
        ),
    )

现在，选择“我要获取所选项目的数据属性”。

$(document).ready(function() {
  $('#id_country').on('select2:select', function(e) {
    // get the selected item data attributes.
  });
});

我已经尝试过$(this).find(":selected").data('url')。但它返回undefined

Answer 1

好吧，在进一步研究之后，我发现了两个解决方案，如果有人遇到相同的问题，我将在此处粘贴这些解决方案。

所以这里的问题是$(this).find(":selected")返回option但没有数据属性，因为所有html都在其text属性内（$(this).find(":selected").text()返回标记。 ）;

解决方案1 ​​

所以第一个解决方案是执行以下操作（我不确定jQuery在后台执行什么操作，它可能解析标记并从中创建对象）。

$($(this).find(":selected").text()).data('url')

解决方案2

我要注意的另一件事是$(this).find(":selected").data()返回select2从ajax调用中获取的数据。因此，我们可以更改视图以返回更多数据。

class CountryAutocomplete(autocomplete.Select2QuerySetView):
    # ... get_result_label()
    def get_results(self, context):
        """Return data for the 'results' key of the response."""
        return [
            {
                "id": self.get_result_value(result),
                "text": self.get_result_label(result),
                "url": result.get_dashboard_url(),
                "selected_text": self.get_selected_result_label(result),
            }
            for result in context["object_list"]
        ]

现在在Javascript中，我们可以使用：

$(this).find(":selected").data().data.url