javascript - 创建一个可点击的下拉菜单，获取值并将它们放入 JQuery 表中

Question

这是一个已经有效的验证检查，我有一个名字，电子邮件和一些其他输入字段，它检查是否所有内容都已填写，如果没有填写，它会使输入字段呈红色。如果一切正确，它将创建一个表格，其中包含我填写的输入字段的值。

<script>
$(document).ready(function(){
    $('input[name="submit"]').click(function(e) {
        e.preventDefault();

        formIsValid = true;

        var errors = [];
        $('.errors').html("");

        $('input.required').each(function() {
            if ($(this).val() == '') {
                formIsValid = false;
                message = $(this).attr('id') + ' is required';
                errors.push(message);
                $(this).addClass("red");
            } else{
                $(this).removeClass("red");
            }
        });


        if (formIsValid == true) {
            $('.data').append('<tr class="datarow"><td>'+$('input[name="name"]').val()+'</td><td>'+$('input[name="email"]').val()+'</td><td>'+$('input[name="phone_number"]').val()+'</td><td class="delete">X</td></tr>');
            updateTotalRows();

            $('.delete').click(function() {
                $(this).parent().remove();
                updateTotalRows();
            })
        }
    });

    function updateTotalRows() {
        $('.total').html('Ik heb nu : ' + $('.datarow').length + ' rows');
    }
}); 
</script>

<script>
function selectCountry() {
    $('.data').append('<tr class="datarow"><td>'+$('.info_link').val()+'</td><td>'+'</td><td class="delete">X</td></tr>');
            updateTotalRows();  
}
</script>

我已经有一个可点击的下拉菜单，其中包含国家/地区，但是当我点击它时应该使用我的函数 selectCountry。该函数应该创建一个表格，其中包含我单击的子项目的名称。

兰登

荷兰

杜伊特兰

弗兰克瑞克

<script>
$(".dropdown")
    .bind("click", function (selectCountry) {   
    console.log((selectCountry)) 
    });

</script>

<script>
$(function(){
 $('.info_link').click(function(){
 alert($(this).text());     //$('#table tr:last').append($("<td></td>").text());
                                });
            });
</script>

所以我的问题是如何制作一个可点击的下拉菜单，该下拉菜单获取子项目的值并将其放入表格中。

Answer 1

您可以使用标准<select id="mySelect"><option value="abc">ABC</option></select>元素并添加元素值更改的函数:

$("#mySelect").change(function() {
  var optionValue = $(this).val();
  $('#table tr:last').append('<td>' + optionValue + '</td>');
});