Question

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

我希望将textarea内容视为输入的文字+所选值。

怎么可能。？

我的代码在这里：

 <!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>

Answer 1

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

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

Answer 2

试试这个：

    <!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>

DEMO

Answer 3

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

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();

JSFIDDLE：http://jsfiddle.net/Pascalz/RfeGK/2/

更改文本区域内容取决于所选值

3 个答案: