Question

我是一个新手，并试图通过javascrip进行自己的依赖性下拉，我被卡住了。

我有2个地区，A REGION，其ID为1，B REGION的ID为2，

我有4个城市A CITY和B CITY，其外键为1，C CITY和D CITY的外键为{{1} }}。我注意到，无论何时循环，都会留下2和B CITY，其外键为D CITY和1。

还有一个比使用2更好的选择，因为它会永久删除.remove。有人能指出我正确的方向吗？

提前致谢。

我的HTML

<options>

和我的剧本

<select id="region" name="region">
        <option id = 0 >-----</option>
        {% for item in region %}
            <option id = {{ item.id }}>{{ item.name }}</option>
        {% endfor %}
 </select>

<select id="city" name="city">
        <option id = 0>-----</option>
        {% for item in city %} 
            <option id = {{ item.reg }}>{{ item.name }}</option>
        {% endfor %}
</select>

这是我的模特

$(document).ready(function() {
    $("#source").change(function() {
        var region = $(this);
        var city = document.getElementById("status")
        var i = 1;
        while (i < city.length) {
            if (city.options[i].val != region.val()){
                city.options[i].remove();
                i++;
            }
        }
    });
});

Answer 1

以下是我解决问题的方法（如果你想使用javascript）

首先，这是我的HTML

<select id="region" name="region">
    <option id = 0 >-----</option>
    {% for item in region %}
        <option id = {{ item.id }}>{{ item.name }}</option>
    {% endfor %}
</select>

<select id="city" name="city">
    <option id = 0>-----</option>
</select>

而不是.remove我使用了.append

我的javascript

$("#source").change(function() {
     el = $(this);
     var select = document.getElementById("city");
     $("#city").val([]);
     select.length = 0;
     $("#city").append("<option>-----</option>");

     <!--This part deletes all records in preparation for new results-->


     var reg = [{% for item in city %}"{{ item.reg }}"{% if not forloop.last %},{% endif %}{% endfor %}];
     var name = [{% for item in city %}"{{ item.name }}"{% if not forloop.last %},{% endif %}{% endfor %}];

     <!--Storing all data in an array-->

     for(var i = 0; i<reg.length; i++){
         if(el.val() == reg[i]){
             $("#status").append("<option id = "+ reg[i] +" value = \"" + name[i] + "\">" + name[i] + "</option>");
         }

      }
});

感谢答案尚旺

Django：依赖性下拉列表

1 个答案: