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

Question

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

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

请有人帮我做这件事。一段代码对我很有帮助。

谢谢。

Answer 1

你可以用like

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