Javascript 更改文本区域内容取决于选定的值_Javascript_Jquery

Javascript 更改文本区域内容取决于选定的值

javascript jquery

Javascript 更改文本区域内容取决于选定的值,javascript,jquery,Javascript,Jquery,我有一张表格。此表单中包含文本区域和下拉字段。当我从此下拉列表中选择多个选项时，值将显示在此文本区域内，当我从下拉列表中取消选择选项时，它们将从文本区域中删除。但现在我的问题是，当我编辑或添加内容到这个文本区域后，我无法添加选定的值到这个文本区域与用户输入的数据我想查看输入文本+选定值的文本区域内容这怎么可能我的代码在这里： <!doctype html> <html lang="en"> <head> <meta ch

我有一张表格。此表单中包含文本区域和下拉字段。当我从此下拉列表中选择多个选项时，值将显示在此文本区域内，当我从下拉列表中取消选择选项时，它们将从文本区域中删除。但现在我的问题是，当我编辑或添加内容到这个文本区域后，我无法添加选定的值到这个文本区域与用户输入的数据

我想查看输入文本+选定值的文本区域内容

这怎么可能

我的代码在这里：

 <!doctype html>
    <html lang="en">
    <head>
     <meta charset="utf-8">
     <title>val demo</title>
     <style>
      p {
      color: red;
      margin: 4px;
      }
      b {
       color: blue;
      }
     </style>
     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     <textarea id="test"></textarea>
     <select id="multiple" multiple="multiple">
       <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select>
<script>
function displayVals() {
  var singleValues = $( "#single" ).val();
  var multipleValues = $( "#multiple" ).val() || [];
  $( "#test" ).val( multipleValues.join( ", " ) );
}

$( "select" ).change( displayVals );
displayVals();
</script>

</body>
</html>

您希望将textarea内容设置为输入文本+选定值。所以它应该如下所示

 var currentTextVal = $("#test").val();
 var multipleValues = $("#multiple").val() || [];
 $("#test").val( currentTextVal + ' , ' + multipleValues.join(", "));

在重写选项值之前从文本中删除选项值：

function displayVals() {
  var multipleValues = $( "#multiple" ).val() || [];
  var test =  $( "#test" ).val();
  console.log("#test = " + test);

  for (i = $( "option" ).length - 1; i >= 0; i--) {
      console.log($($("option")[i]).val());    
      test = test.replace($($("option")[i]).val() + ", ", "");  
      test = test.replace($($("option")[i]).val(), "");       
  }     

  $( "#test" ).val( test.trim() + " " + multipleValues.join( ", " ) );
}

$( "select" ).change( displayVals );
displayVals();

jsiddle:

试试这个：

    <!doctype html>
    <html lang="en">
    <head>
     <meta charset="utf-8">
     <title>val demo</title>
     <style>
      p {
      color: red;
      margin: 4px;
      }
      b {
       color: blue;
      }
     </style>
     <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    </head>
    <body>
     <textarea id="test"></textarea>
     <div id="result"></div>
     <select id="multiple" multiple="multiple">
       <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select>
<script>
function displayVals() {
  // $( "#test" ).val() = '';
  var singleValues = $( "#test" ).val();
  var multipleValues = $( "#multiple" ).val() || [];
  $( "#result" ).html(singleValues+' '+ multipleValues.join( ", " ) );
}

$( "select" ).change( displayVals );
displayVals();
</script>

是否希望自定义文本和选定框值在textarea中合并？是的，这是我的问题。.文本将从页面加载时的静态状态变为静态状态，或者您希望输入动态状态，如textbox？您是否希望像下面的示例一样无限期追加，或者您希望只输入文本+选定文本并更改文本仅选定文本位？是，我希望输入文本+选定文本，并仅更改选定文本位。我希望在文本区域内显示内容。是否可能？如果我希望显示类似此格式的内容，请选择值+输入文本+选定值+选定值+输入文本，如何执行此操作？否如果我在两个选定值之间输入文本，则文本将显示在文本区域内容的开头。