JavaScript 不读取多选中的文本

Question

我想捕获表单的值，以便在将它们记录在数据库中之前在某些函数中对其进行详细说明。我想我应该使用 JavaScript，所以我们在这里:

我的模型:

class Region(models.Model):
    number = models.CommaSeparatedIntegerField(max_length=9, unique=True)
    city = models.OneToOneField(Community, blank= True, null=True)
    resources = models.ManyToManyField(Resource, blank=True)

我的表格:

class Crea_RegionForm(forms.ModelForm):
    quantity = forms.IntegerField(initial=1)
    resources=MyModelMultipleChoiceField(Resource.objects.all(), 
        widget=forms.CheckboxSelectMultiple, label='Risorse')

    class Meta:
        model = Region
        fields = ('number', 'city', 'resources')

    def __init__(self, *args, **kwargs):
        super(Crea_RegionForm, self).__init__(*args, **kwargs)
        quantity = self.fields['quantity'] #costum field

我的MyModelMultipleChoiceField:

class MyModelMultipleChoiceField(forms.ModelMultipleChoiceField):
    def label_from_instance(self, obj):
        return format_html(
            '<span style="font-weight:normal">{}</span>', obj.name)

所以我的页面中资源的 html:

Risorse
<ul id="id_resources">
    <li>
        <label for="id_resources_0">
            <input id="id_resources_0" name="resources" type="checkbox" value="1" /> 
            <span style="font-weight:normal">Turism</span>
        </label>
    </li>
    <li>
        <label for="id_resources_1">
            <input id="id_resources_1" name="resources" type="checkbox" value="2" /> 
            <span style="font-weight:normal">Agricole</span>
        </label>
    </li>
    <li>
        #others
    </li>
</ul>

最后是 creat_region.html 中的 javascript:

<input type="button" value="Create" id="CreateButton" />

  <script type="text/javascript">
    <!--
    var myform = document.getElementById("crea_region_form");
    var number = myform.number.value;

    var city_index = document.getElementById("id_city").selectedIndex;
    var city;
    if (city_index > -1) {
    city = document.getElementById("id_city").options[city_index].text;
    document.write("city: " + city);
    }

    var risorse = myform.resources;
    var selectedresources = [];
    for (var i = 0; i < risorse.length; i++) {
      document.write("risorse: " + risorse[i].text);
      //document.write("risorse: " + risorse[i].value);
      if (risorse[i].selected) selectedresources.push(risorse[i].value);
    }
    document.write("risorse: " + selectedresources);

    var quantity = myform.quantity.value;

    var button = document.getElementById("CreateButton");
    // to be completed

    //-->
  </script>

问题出在资源中:创建复选框列表的 Costum ModelMultipleChoiceField。我的脚本无法读取文本和行

document.write("risorse: " + risorse[i].text)给出=> risorse:未定义

document.write("risorse: " + risorse[i].value)给=> risorse: 1

document.write("risorse: " + selectedresources)给=> risorse:

编辑

我的新脚本:

...
var risorse = myform.resources;
document.write("risorse: " + risorse[1].nextSibling.innerHTML)
console.log(risorse)
console.log(risorse[1].nextSibling.innerHTML)
var selectedresources = [];
for (var i = 0; i < risorse.length; i++) {
      document.write("risorse: " + risorse[i].nextSibling.innerHTML);
      if (risorse[i].selected) selectedresources.push(risorse[i].nextSibling.innerHTML);
}
document.write("risorse: " + selectedresources);

document.write("risorse: " + risorse[1].nextSibling.innerHTML)给=>未定义

console.log(risorse)给=>RadioNodeList [ <input#id_resources_0>, <input#id_resources_1>, <input#id_resources_2>, <input#id_resources_3>, <input#id_resources_4>, <input#id_resources_5>, <input#id_resources_6>, <input#id_resources_7> ]

console.log(risorse[1].nextSibling.innerHTML)给=>未定义

Answer 1

抱歉，但是checkbox没有text属性，根据此 link ，唯一的属性是:checked , name , required , value .

您需要更新代码，应用程序中的某个位置可能有一个带有 key 的对象=> text这样你就可以找到与特定key相对应的文本，像这样:

var _texts = {'1': 'Text 1', '2': 'Text 2'};
var risorse = myform.resources;

for (var i = 0; i < risorse.length; i++) {
    document.write("risorse: " + _texts[risorse[i].value]);
}

随意填写以验证是否 risorse[i].value存在于texts ，您可以使用hasOwnProperty功能。

或者，您可以利用当前的 html 并使用 nextSibling :

var risorse = myform.resources;

for (var i = 0; i < risorse.length; i++) {
    document.write("risorse: " + risorse[i].nextSibling.innerHTML);
}