jquery 根据选择字段值替换文本区域中的单词

8ehkhllq 于 2023-01-30 发布在 jQuery

关注(0)|答案(1)|浏览(132)

我有一个空的文本区域字段。第一个下拉菜单允许我选择要插入到文本区域中的代码块。例如：

<select name="myfirstselect[]" class="my-select">
            <option selected disabled="disabled">Choose your code block</option>
            <option value="first-option">first code block</option>
            <option value="second-option">second code block</option>
          </select>

         var first_option='...(my first block of code)';
         var second_option='...(my second block of code)';
           var textarea = $("#myTextarea");             
           $('.my-select').on('change' , function() {
           select = $(this).val();
           if(select == "first-option") {
           textarea.text(first_option);  
          } else if(select == "second-option") {
           textarea.text(second_option); 
        }

我有第二个下拉菜单，允许我替换代码块中的一些单词。

$('.my-other-select').on('change' , function() {
     code = $(this).val();//get the value
     text = $('.my-other-select option:selected').html();//get the text
   
     textarea.html(textarea.html().replace(/word1/g,code));
     textarea.html(textarea.html().replace(/word2/g,text));
     
  });

使用以下代码可以正常工作：我首先在文本区域中选择要注入的代码块，然后当我从第二个下拉列表中选择一个选项时，每个“word1”和“word2”都被下拉列表中的文本和值所替换。
问题是，一旦单词被替换，即使我改变主意，在第二个下拉菜单中选择另一个选项，它也不会改变文本。我想要的是更动态的东西，所以每次我选择其他选项时，单词都会被相应地替换。
在这里，如果我想选择另一个选项，我必须刷新页面。
这是否与代码有关：

textarea.html(textarea.html().replace()

任何帮助将不胜感激：）

jquery

来源：https://stackoverflow.com/questions/75273054/replace-words-in-a-textarea-depending-on-a-select-field-value

1条答案

按热度按时间

0s0u357o1#

无论如何，你需要获得原始文本，然后在第二个选择框改变时替换它，所以，实现这一点的一种方法是使用第一个选择框的值获得原始文本，然后替换该文本。

演示代码：

var first_option = 'Lorem ipsum dolor sit amet';
var second_option = 'Duis aute irure dolor in amet';
var textarea = $("#myTextarea");

$('.my-select').on('change', function() {
  select = $(this).val();
  textarea.text(getText(select));
  $(".my-other-select").val("")
})

$('.my-other-select').on('change', function() {
  code = $(this).val(); //get the value
  text = $(this).find("option:selected").text(); //get the text
  //get the option from first select --
  var originalText = getText($(".my-select").val())
  textarea.html(originalText.replace(/dolor/g, code).replace(/amet/g, text));

});

function getText(select) {
  if (select == "first-option") {
    return first_option;
  } else if (select == "second-option") {
    return second_option;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="myfirstselect[]" class="my-select">
  <option selected disabled="disabled">Choose your code block</option>
  <option value="first-option">first code block</option>
  <option value="second-option">second code block</option>
</select>

<select class="my-other-select">
  <option selected disabled="disabled" value="">Choose</option>
  <option value="2345">1</option>
  <option value="8990">2</option>
</select>

<textarea id="myTextarea" style="width:250px;height:100px"></textarea>

赞(0）回复(0）举报 2023-01-30

我来回答

jquery 根据选择字段值替换文本区域中的单词

1条答案

相关问题

热门标签

最新问答