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

在更改事件中，您可以使用select访问触发更改事件的this。要使用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

您的值属性中出现语法错误。

尝试：

{{1}}

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

2 个答案: