如何从 select2 下拉列表中获取值？

Question

好的，我加载了一些数据 (JSON)，然后通过选择菜单，我根据所选值生成一个新的选择菜单：换句话说，选择一个县，生成一个包含该县所有城镇的另一个选择，并在同时应用 select2 插件，使其可搜索。

我需要能够将所选内容放入隐藏字段以进行提交，这就是我遇到的问题。谁能帮帮我，谢谢。 JQuery 不是我最强的。

<script>
    $(document).ready(function(){

    //var county = $('#county').find(":selected").text();
    $('select').on('change', function() {
    var countySelect = $(this).val();
    console.log(countySelect);
    $.getJSON('irishtowns.json', function(data) {
    var output="<select id='townSelect'>";
    output+="<option>Choose a town</option>";
    for (var i in data.irishtowns) {
        if (data.irishtowns[i].county == countySelect) {
        output+="<option value='>" + data.irishtowns[i].town + "'>" + data.irishtowns[i].town + "</option>";
        }
    }
    output+="</select>";
    document.getElementById("placeholder").innerHTML=output;
    $('#placeholder select').select2();

    });

  });
 });
</script>

Answer 1

在更改事件中，您可以使用this 访问触发更改事件的select。要使用 jQuery 函数并获取值，您应该这样做（在第一次选择时已经这样做了）：

var selected = $(this).val();

由于您每次都创建了一个新的选择，因此您必须重新创建一个更改处理程序：

$('#placeholder select').on('change', function() {
    $('#hidden').val($(this).val());
})

可以使用一些优化：

• 您正在混合使用传统的 JavaScript 和 jQuery（如果您刚开始，这可以正常工作并且可以理解，但会使内容更难阅读）。
• 您应该为更改处理程序使用 ID，以确保这仅适用于您想要的选择。
• 也许不需要重新创建选择。仅更新选项。
• （我不知道 select2，所以也许这还不是最优的）。

以下是一些建议：

<script>
$(document).ready(function(){

    // Make townSelect a select2 and update the value in hidden when changed
    $('#townSelect').select2();
    $('#townSelect').on('change', function() {
        var selectedTown = $(this).val();
        $('#hidden').val(selectedTown);
    });

    // Change the available towns when county changes
    $('#county').on('change', function() {
        var countySelect = $(this).val();
        $.getJSON('irishtowns.json', function(data) {
            // Remove previous options
            var select = $('#townSelect').empty();
            // Add new options
            // & trigger 'change' to make select2 aware of it
            select.append($('<option>', { text: 'Choose a town' }).change();
            for (var i in data.irishtowns) {
                if (data.irishtowns[i].county == countySelect) {
                    select.append($('<option>', { value: data.irishtowns[i].town, text: data.irishtowns[i].town });
                }
            }
        });
    });
});
</script>
<!-- ... -->
<select id="county"><!--...--></select>
<select id="townSelect"><option>Choose a county</option></select>

Answer 2

你的 value 属性有语法错误。

试试：

    output+="<option value='"  + data.irishtowns[i].town + "'>" + data.irishtowns[i].town + "</option>";