Question

我正在使用country-region-selector javascript插件在应用中创建全面的区域/下拉菜单。我正在处理的特定应用程序是用于填写人员列表的地址。挑战在于这个列表是动态生成的（我在后端使用rails和cocoon gem，但这可能不是非常重要）。但是文档中有一些解决方法，包括创建id并动态填充列表;所有这一切都很清楚，似乎正在发挥作用。

问题，当我从我的数据库加载列表时，第一个人的国家和地区加载没有问题。但是，对于所有后续人员，国家/地区菜单会加载但状态菜单不会加载。幸运的是，我已经能够在一个jsfiddle中复制这个确切的问题，让我相信我必须做一些客观错误的事情。澄清一下，它似乎不是字段本身的内在问题。小提琴中有三个;如果我摆脱了第一个人，那么（以前的）第二个人就会工作但是（以前的）第三个人仍然没有。更奇特的是，我在应用程序中确实有另一个区域/国家/地区字段与人员字段无关但显示在它们上方并且它与第一个人一起工作正常。您可以使用文档here找到小提琴here和插件本身。

问题的其余部分基本上是附录，所以我现在就说，谢谢你的任何建议。

附录

该插件的基本“使用方法”如下

如何使用

这很容易。

1）在您的网页中包含crs.min.js文件。

2）在表单的相应位置添加两个<select>字段。

3）给国家字段一类crs-country。   4）现在我们需要将每个国家/地区字段映射到其对应的区域字段，以便脚本知道在选择国家/地区时要更新的内容。将属性添加到国家/地区下拉列表：data-region-id =“ABC”其中ABC是任何字符串。现在给区域下拉列表ID为“ABC”。

就是这样！你已经完成了。

以下是其中一位不工作的人的示例：

<div class="clearfix entity-add nested-fields person">
<div class="dynamic-container">
    <div class="symegrid">
        <div class="form-inline">
            <div class="input string optional company_people_fname">
                <label class="string optional" for="company_people_attributes_2_fname">First Name</label>
                <input class="string optional fname form-input form-control fifty" type="text" value="test" name="company[people_attributes][2][fname]" id="company_people_attributes_2_fname" />
            </div>
            <div class="input string optional company_people_lname">
                <label class="string optional" for="company_people_attributes_2_lname">Last Name</label>
                <input class="string optional lname form-input form-control fifty" type="text" value="1" name="company[people_attributes][2][lname]" id="company_people_attributes_2_lname" />
            </div>
        </div>
        <div class="form-inline">
            <div class="input email optional company_people_email">
                <label class="email optional" for="company_people_attributes_2_email">Email</label>
                <input class="string email optional email form-input form-control" type="email" value="2" name="company[people_attributes][2][email]" id="company_people_attributes_2_email" />
            </div>
            <div class="input tel optional company_people_telephone">
                <label class="tel optional" for="company_people_attributes_2_telephone">Telephone</label>
                <input class="string tel optional telephone form-input form-control" type="tel" value="3" name="company[people_attributes][2][telephone]" id="company_people_attributes_2_telephone" />
            </div>
        </div>
        <div class="form-inline">
            <div class="input string optional company_people_street">
                <label class="string optional" for="company_people_attributes_2_street">Street</label>
                <input class="string optional street form-input form-control" type="text" value="" name="company[people_attributes][2][street]" id="company_people_attributes_2_street" />
            </div>
        </div>
        <div class="form-inline">
            <div class="input string optional company_people_city">
                <label class="string optional" for="company_people_attributes_2_city">City</label>
                <input class="string optional city form-input form-control" type="text" value="" name="company[people_attributes][2][city]" id="company_people_attributes_2_city" />
            </div>
            <div class="input select optional company_people_country">
                <label class="select optional" for="company_people_attributes_2_country">Country</label>
                <select data-region-id="person_state" data-default-value="United States" class="select optional location country form_control crs-country" name="company[people_attributes][2][country]" id="company_people_attributes_2_country">
                    <option value=""></option>
                    <option value="true">Yes</option>
                    <option value="false">No</option>
                </select>
            </div>
        </div>
        <div class="form-inline">
            <div class="input select optional company_people_state">
                <label class="select optional" for="person_state">State/Province</label>
                <select id="person_state" class="select optional state form-control location crs-state" data-default-value="Utah" name="company[people_attributes][2][state]">
                    <option value=""></option>
                    <option value="true">Yes</option>
                    <option value="false">No</option>
                </select>
            </div>
            <div class="input string optional company_people_zip">
                <label class="string optional" for="company_people_attributes_2_zip">Zip</label>
                <input class="string optional zip form-input form-control" type="text" value="" name="company[people_attributes][2][zip]" id="company_people_attributes_2_zip" />
            </div>
        </div>
    </div>
</div>

Answer 1

您申请attr的数据区域ID无法写入dom。

当你在jquery上更改属性时，网站上的真实元素不会改变，只是存储在＆＃34; jquery space＆＃34;上的元素。 chanhges。这就是为什么插件的init（）不起作用的原因。

要使用

更改html，需要工作

 //pseudo pseudo code
 $('selector').html('<select data-region-id="something'+index+'"></select')

或类似。

如果它以任何方式帮助您，我发现这样做：

在第一个字段中选择一个国家和地区
在第二个字段上更改国家/地区
看到它重新设置第一个字段上的区域

我认为这是因为它无法区分不同的选择者。

使用具有动态生成内容的country-region-selector插件

附录

1 个答案: