javascript - 用JS构建表单摘要有困难

抱歉，这个问题很棘手，但是，我正在尝试构建一个表单摘要，该表单摘要将立即使用所有使用的字段填充div。这是该字段的一个小样本：Fiddle

由于某种原因，JS无法正常运行，有人可以指出我做错了什么吗？

例如，我希望它输出：“ AND名称：john例外编号222”。

我还希望能够单击结果以将其删除，然后清除该字段。谢谢

$(".allS").change(function () {
    if ($(this).next('.textArea').not(':empty'))
    // varible to hold string
    var str = "";
    $("select option:selected").each(function () {
        str += $(this).text() + " ";
    });
    $("#text_here").text(str);
}).change();

$('.textArea').change(function(){

    var $inputs = $('form#form :input[type="text"]'),
        result = "";

    $inputs.each(function(){
        // access the individual input as jQuery object via $(this)
        result += $(this).val()+"<br>";
    });

    // store result in some div
    $('div#text_here').text(result);
}).change();

最佳答案

您的代码中有很多错误。我将其简化为非常短的代码，仅执行获取所需输出所需的操作。这是working fiddle。

$(".allS, .textArea").change(function () {
    var str = '';
    if ($('#name').val().length > 0 && $('#number').val().length > 0)
        var str = $('#nameMod>option:selected').text() + ' name:' + $('#name').val() + ' ' + $('#numberMod>option:selected').text() + ' number ' + $('#number').val();

    $("#text_here").html(str);
});

基本上，这是将change事件处理程序附加到两个类（.alls, .textArea），并且在触发事件时，将对两个输入字段进行任何内容测试。如果此测试通过，则从所有相关值中组成一个字符串，并设置div内容。如果测试失败（无内容），则str变量包含一个空字符串，并且清除了div。