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>

最后我的 javascript 在 crea_region.html:

<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: undefined

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);
}

Answer 2

完成！！这看起来很有效...

我的脚本：

...
var risorse = myform.resources;
var selectedresources = [];

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

JavaScript 不阅读多选文本

JavaScript don't read the text in multiselect

html

javascript

django

m2m

编辑