javascript - 复制包含纯文本的 div 内容并选择菜单

Question

我有一个 div，其内容是使用后端 php 脚本动态生成的。 div 包含纯文本以及选择菜单(下拉菜单)。我需要将内容(纯文本和菜单中选定的选项)复制到同一页面的文本区域。

我在 stackoverflow 中搜索了很多，也得到了一些答案，并尝试了以下操作: 1. javascript 的 .innerHTML 但它复制了 HTML 代码。 2. .innerTEXT 但它不显示从列表中选择的值。 3.ajax的克隆功能，但它不适用于文本区域，并且如果我尝试将内容复制到另一个div中，则会生成相同的选择选项。

请有人帮助我做到这一点。一段代码对我很有帮助。

谢谢。

Answer 1

你可以使用类似

var text=$("div").contents().filter(function() {
  return this.nodeType == 3;
}).text();
var selectValue=$("div").find("select").val();
$("input[type='text']").val("Text:"+text+"selectValue:"+selectValue);

Demo

编辑

$("div").find("select").change(function () {
    var text = $("div").contents().filter(function () {
        return this.nodeType == 3;
    }).text().trim();
    var selectValue = $(this).val();
    $("input[type='text']").val(text + selectValue);
});

updated demo

编辑

$("[name=div1]").find("select").change(function () {
    var text = $("div").contents().filter(function () {
        return this.nodeType == 3;
    });


    var finalValue = "";
    $("[name=div1]").find("select").each(function (i) {
        finalValue += $(text[i]).text().trim() + $(this).val();
    });
    $("input[type='text']").val(finalValue);
});

Updated Fiddle