Question

我有一个多选下拉列表，选择textareas会附加在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已被删除，我不想要:(

有没有办法在做出新选择时保留那些textarea？

我已经搜索并使用了堆栈溢出中可用的每个示例，但没有一个可以帮助我。

提前致谢。

Answer 1

首先我不喜欢在jquery和纯javascript之间混音..所以我会在jquery中编写我的代码

第二次 如果您需要我的意见..我可以说您选择了一种难以实现的目的......以一种简单的方式你可以'追加（） '#texts中的所有选项onload并在选择更改时显示/隐藏它们

像这样的东西

$(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).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();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="proprtyid" multiple>
  <option value="1">1</option>
  <option value="2">2</option>
  <option selected value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
<div id="texts"></div>

Answer 2

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

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;

写

webpackedmodules = [
   function(module, exports, __webpack_require__) {
      ...
   }, 
   function(module, exports, __webpack_require__) {
      ...
   }, 
]

我希望这会有所帮助

Answer 3

致电

texts.innerHTML = "";

导致您的选择被清除。你需要避免它。我没有你的整个HTML，但这可能会根据你的逻辑而改变。

jQuery：保留下拉列表更改时生成的动态文本区域中的值

3 个答案: