尝试使用select2插件使两个链接的自动填充选择字段
第一个选择包含国家名称(静态选择)，第二个显示从第一个选择中选择的国家的状态，我的代码是
<select id="country" name="country" size="1" class=" form-control">
<option></option>
<option value="1">USA</option>
<option value="2">Untied Kingdom</option>
<option value="3">France</option>
etc........
</select>
<select id="states" name="states" size="1" class="form-control">
<option></option>
</select>
JavaScript代码
$(document).ready(function() {
$('#country').select2({
placeholder: 'Select Country',
allowClear: true
});
$('#state').select2({
placeholder: 'Select State',
allowClear: true
});
$('#country').change(function() {
var selectedCountries = $('#countryoption:selected').val();
var selectedCountries = 'id='+ selectedCountries;
$.ajax({
type: 'POST',
url: 'http://localhost/CodeIgniter/countries/get_state/',
dataType: 'html',
data: selectedCountries,
}).done( function( data ) {
data = $.map(data, function(item) {
return { id: item.id, text: item.name };
});
$('#state').select2({
data: data
});
}
})
});
});
JSON中的修订结果
{"id":"1","text":"Chigaco"}{"id":"4","text":"Albama"}{"id":"2","text":"Tulsa"} etc...........
我在一个例子中进行了大量搜索，以帮助我解决这个问题，但我所需要的所有工作就是显示第一个选择中所选择的国家/地区的状态，然后将其传递给第二个选择，即我正在使用select2 v4.0和jQuery v2
最佳答案
Select2的链接方式与标准<select>的链接方式相同。因此，这意味着当第一个选择的值被链接时，第二个选择将被重置(通常重置为占位符)，并且选项通常也会更改。
对于使用Select2可以完成此操作，您有两个选择:
<select>的选项，并让Select2处理本地搜索。这与您当前尝试的操作类似，但是当第二个<select>中可以选择大量选项时，可能会遇到问题。在您的情况下，一个国家内不应有成千上万个“州”(无论州的程度如何)，因此本地搜索不应该成为太大的问题。
url的值传入不同的参数作为<select>来使用。这要求您有一个动态端点，该端点可以处理检索第二个选择项的内容并在搜索时对其进行过滤，因此这并不总是可行的。如果您已经有了一个支持过滤的端点，那么这是一个响应速度更快的选项，因为用户不必等待所有的选项都可以被检索，然后他们才可以从第二个
<select>中选择一个选项。您选择哪种选项在很大程度上取决于您已经设置的内容，正在使用的数据集的大小(Select2不能很好地处理数千种选项)以及要提供的用户体验。
第一个选项的代码类似于
$("#first").select2({
placeholder: 'Select a number range'
});
$("#second").select2({
placeholder: 'Select a number'
});
$("#first").on("change", function () {
$("#second option[value]").remove();
var newOptions = []; // the result of your JSON request
$("#second").append(newOptions).val("").trigger("change");
});
请注意，虽然与您使用的代码相似，但仍有一些小差异会引起您的注意。
dataType: "html"时，您正在设置dataType: "json"。您在响应中返回的是JSON，而不是HTML。<select>之前，您不会清除自己的.select2({data:[]})。 Select2不会自动删除它使用<option>生成的data标记，因此您需要自己进行操作。<select>的值时，您永远不会告诉Select2。更改后，您需要在第二个change上重新触发<select>事件。第二个选项的代码类似于
$("#first").select2({
placeholder: 'Select a number range'
});
$("#second").select2({
placeholder: 'Select a number',
ajax: {
url: http://localhost/CodeIgniter/countries/get_state/',
type: 'POST',
data: function (params) {
return {
id: $("#first").val(),
search: params.term
}
}
}
});