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是无效的。您还需要更改名称属性，否则您的表单将只包含最后一个元素的值。

您可以将类添加到顶级类别选择元素

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

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

然后，您可以将属性添加到链接到父选择元素

的子类别

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

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

$('.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级联下拉列表

1 个答案: