Javascript 上的级联下拉菜单

Question

级联下拉列表在第一个上工作正常，无法识别第二个。这里缺少一些小东西。我已经尝试了几个选项，但 javascript 没有附加到第二个电话。有没有办法动态添加？

<label class="page1">Country</label>
<div class="tooltips" title="Please select the country that the customer will primarily be served from">
    <select id="country" name="country" placeholder="Phantasyland">
        <option></option>
        <option>Germany</option>
        <option>Spain</option>
        <option>Hungary</option>
        <option>USA</option>
        <option>Mexico</option>
        <option>South Africa</option>
        <option>China</option>
        <option>Russia</option>
    </select>
</div>

<br />
<br />

<label class="page1">Location</label>
<div class="tooltips" title="Please select the city that the customer is     primarily to be served from.">
    <select id="location" name="location" placeholder="Anycity"></select>
</div>

<label class="page1">Country</label>
<div class="tooltips" title="Please select the country that the customer will primarily be served from">
    <select id="country" name="country" placeholder="Phantasyland">
        <option></option>
        <option>Germany</option>
        <option>Spain</option>
        <option>Hungary</option>
        <option>USA</option>
        <option>Mexico</option>
        <option>South Africa</option>
        <option>China</option>
        <option>Russia</option>
    </select>
</div>

<br />
<br />

<label class="page1">Location</label>
<div class="tooltips" title="Please select the city that the customer is primarily to be served from.">
    <select id="location" name="location" placeholder="Anycity"></select>
</div>

Javascript:

jQuery(function($) {
    var locations = {
        'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
        'Spain': ['Barcelona'],
        'Hungary': ['Pecs'],
        'USA': ['Downers Grove'],
        'Mexico': ['Puebla'],
        'South Africa': ['Midrand'],
        'China': ['Beijing'],
        'Russia': ['St. Petersburg'],
    }

    var $locations = $('#location');
    $('#country').change(function () {
        var country = $(this).val(), lcns = locations[country] || [];

        var html = $.map(lcns, function(lcn) {
            return '<option value="' + lcn + '">' + lcn + '</option>'
        }).join('');

        $locations.html(html)
    });
});

Answer 1

问题是您在 HTML 元素上使用了重复的 ID。 HTML 文档中的多个元素具有相同的 ID 是无效的。您还需要更改名称属性，否则您的表单将只包含最后一个元素的值。

您可以将 class 添加到您的顶级类别 select 元素

<select id="country1" class="country" name="country1" placeholder="Phantasyland">
 ...
</select>

<select id="country2" class="country" name="country2" placeholder="Phantasyland">
 ...
</select>

然后您可以将属性添加到链接到父 select 元素的子类别

<select data-parent="country1" name="location1" placeholder="Anycity"></select>
<select data-parent="country2" name="location2" placeholder="Anycity"></select>

然后将处理程序绑定到 country class

$('.country').change(function () {
    var id = $(this).attr('id');
    var $locations = $('[data-parent=' + id + ']');

    var country = $(this).val(), lcns = locations[country] || [];

    var html = $.map(lcns, function(lcn) {
        return '<option value="' + lcn + '">' + lcn + '</option>'
    }).join('');

    $locations.html(html)
});

Javascript 上的级联下拉菜单

Cascading dropdown on Javascript

javascript

html

dropdown