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

Question

我正在使用国家/地区选择器 javascript 插件在应用程序中创建全面的 region/dropdown 菜单。我正在处理的特定应用程序是用于完成人员列表的地址。挑战在于这个列表是动态生成的（我在后端使用 rails 和 cocoon gem 但这可能不是很重要）。不过，文档中有一些变通方法，其中涉及创建 ID 并即时填充列表；所有这些都非常清楚并且似乎在起作用。

问题是当我从我的数据库加载列表时，第一个人的国家和地区加载没有问题。然而，对于所有随后的人，国家菜单加载但状态菜单没有。幸运的是，我已经能够在 jsfiddle 中重现这个确切的问题，这让我相信我一定是在做一些客观上错误的事情。澄清一下，这似乎不是字段本身的内在问题。 fiddle中有3个；如果我摆脱了第一个人，那么（以前的）第二个人就会工作，但（以前的）第三个人仍然没有。更奇怪的是，我在应用程序中确实有另一个 region/country 字段，它与人员字段无关但出现在它们上方并且与第一人称一起工作正常。您可以找到 fiddle here and the plugin itself, with documentation here.

问题的其余内容本质上是一个附录所以我现在说，感谢您的任何建议。

附录

插件的基本"how to use"如下

How to Use

It's very easy.

1) Include the crs.min.js file in your webpage.

2) Add two <select> fields in the appropriate locations in your form.

3) Give the country field a class of crs-country. 4) Now we need to map each country field to its corresponding region field so the script knows what to update when a country is selected. Add an attribute to the country dropdown: data-region-id="ABC" where ABC is any string. Now Give the region dropdown an id of "ABC".

That's it! You're done.

这是其中一个不起作用的人的例子：

<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 的 data-region-id 没有写入 dom。

当您更改 jquery 上的属性时，网站上的真实元素不会改变，只是 "jquery space" 上的存储元素会发生变化。这就是为什么你的插件的 init() 不起作用。

要解决这个问题，您需要将 html 更改为

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

或类似。

如果它能以任何方式帮助您，我发现它是在执行以下操作：

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

我想那是因为它无法区分不同的选择器。

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

Using country-region-selector plugin with dynamically generated content

html

javascript

jquery

select

jquery-plugins

附录