Javascript 使用具有动态生成内容的国家/地区选择器插件

我正在使用country region selector javascript插件在应用程序中创建全面的区域/下拉菜单。我正在开发的一个特殊应用程序是用于完成一个人员列表的地址。挑战在于这个列表是动态生成的（我在后端使用rails和cocoon gem，但这可能不是非常重要）。不过，文档中有一些变通方法，包括创建ID和动态填充列表；所有这些都很清楚，而且似乎都在起作用

问题是当我从数据库加载列表时，第一个人的国家和地区加载时不会出现问题。但是，对于所有后续人员，将加载国家/地区菜单，但不会加载状态菜单。幸运的是，我已经能够在JSFIDLE中复制这个精确的问题，这使我相信我一定是在客观上做错了什么。澄清一下，这似乎不是字段本身的固有问题。小提琴中有三把；如果我除掉第一个人，（以前）第二个人会工作，但（以前）第三个人仍然不工作。更奇怪的是，我确实在应用程序中有另一个与person字段无关的region/country字段，但它出现在person字段上方，与第一个person字段一起工作正常。您可以通过文档找到fiddle和插件本身

问题的其余内容基本上是一个附录，所以我现在要说，谢谢你的建议

附录 插件的基本“使用方法”如下所示

如何使用

这很容易

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

2） 在表单的适当位置添加两个

字段

3） 为country字段指定一个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>

名字
姓
电子邮件
电话
街头
城市
国家
对
不
州/省
对
不
拉链

---

应用于attr的数据区域id不会写入dom

当您更改jquery上的属性时，网站上的真实元素不会更改，只更改“jquery空间”上存储的元素。 这就是插件的init（）无法工作的原因

要在需要更改html的区域工作，请使用

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

//伪伪代码
$（'selector'）.html（'很好。我无法让
.html（）
正常工作（我肯定我犯了某种错误），但我通过您的解释解决了服务器端的问题。谢谢。我花了几个小时在这方面。