Javascript jQuery：保留下拉更改时生成的DynamicTextArea中的值

我有一个多选下拉列表，在选择文本区域被附加在div中

代码如下：

jQuery('#proprtyid').change(function () {
   var texts = document.getElementById("texts");
   var countoptions = jQuery(".propertiesselectbox :selected").length;
   texts.innerHTML = "";
   x=[];
   jQuery(".propertiesselectbox").children(':selected').each(function(){  
      x.push(jQuery(this).text());
   });  
   for(i=0; i < countoptions; i++) {
      texts.innerHTML += '<p style="margin:20px 0 5px 0;">Please add the description for: <b>' + x[i] + '</b></p><textarea style="display: block;margin:0px 0 20px 0;" rows="4" cols="50" name="propnotes_'+ i +'" /></textarea>';
   }
});

所以问题是，我做了一个选择，根据jquery的长度，我将这些textarea的数量附加到div中，并在其中添加了文本，现在在进行新选择时，我以前生成的所有textarea都被删除了，我不希望：

在做出新的选择时，有没有办法保持这些文本区域的位置

我已经搜索并使用了stack overflow中可用的每一个示例，但是没有一个可以帮助我

---

提前感谢。

在HTML属性中尝试从循环保存数据时， 而不是

for(i=0; i < countoptions; i++) { texts.innerHTML += '<p style="margin:20px 0 5px 0;">Please add the description for: <b>' + x[i] + '</b></p><textarea style="display: block;margin:0px 0 20px 0;" rows="4" cols="50" name="propnotes_'+ i +'" /></textarea>'; }

写

var text = "";
for(i=0; i < countoptions; i++) { text += '<p style="margin:20px 0 5px 0;">Please add the description for: <b>' + x[i] + '</b></p><textarea style="display: block;margin:0px 0 20px 0;" rows="4" cols="50" name="propnotes_'+ i +'" /></textarea>'; }
//then after the loop, set the value of your HTML to the **text** variable 
texts.innerHTML = text; 

我希望这有助于呼吁

texts.innerHTML = "";

使您的选择被清除。你需要避免它。我没有完整的html，但这可能会根据您的逻辑发生变化。

首先，我不喜欢将jquery和纯javascript混合使用。。所以我将用jquery编写代码

第二，如果你需要我的意见。。我可以说你选择了一条艰难的道路来实现这一点。。通过一种简单的方式，您可以“附加”文本中的所有选项，并在选择更改时显示/隐藏它们

像这样的

$(document).ready(function(){
    var texts = $("#texts");
    // append divs for each select option
    $("#proprtyid option").each(function(i){  
       var getText = $(this).text();
       texts.append('<div data-option="'+i+'"><p style="margin:20px 0 5px 0;">Please add the description for: <b>' + getText + '</b></p><textarea style="display: block;margin:0px 0 20px 0;" rows="4" cols="50" name="propnotes_'+ i +'" /></textarea></div>');
    });
    // hide all divs
    $('div[data-option]').hide(0);
    // select change event
    $('#proprtyid').change(function () {
       //loop through options
       $(this).find('option').each(function(index){
         if(this.selected){
           $('div[data-option='+ index +']').show(0);
         }else{
           $('div[data-option='+ index +']').hide(0);
         }
       });
    }).change();
});

工作演示

$document.readyfunction{ var text=$text； //为每个选择选项追加div $proprtyid选项。每个函数{ var getText=$this.text； text.append'

请为“+getText+”

”添加说明； }; //隐藏所有div $'div[data option]'.hide0； //选择更改事件 $'proprtyid'.changefunction{ //循环通过选项 $this.find'option'。每个函数索引{ 如果选择了这个{ $'div[data option='+index+']'。show0； }否则{ $'div[data option='+index+']'.hide0； } }; }.改变； }; 1. 2. 3. 4. 5.

---

你能提供html吗？text.innerHTML=；-此行删除text元素内的所有内容。与其在每次更改时完全重新填充框，不如填充数组，将其与文本元素中已有的内容进行比较，并仅进行必要的更改。虽然我不知道PropTyId select和.propertiesselectbox select之间有什么不同..但我创建了一个演示。。请检查我的最新答案