如何获得下拉到文本区域的值

Question

我有3个功能（无线电，textarea和下拉列表）我能够将无线电和textarea的值输入textarea但是下拉不起作用

我想要做的是当我选择一个选项到Radio它将显示textarea结果然后当用户在textarea中输入文本时它将添加到textarea然后当用户选择一个选项下拉它将得到的值textarea的具体下拉选项

（电台+文字+下拉=单一文字区域）

我已经尝试过一些代码，但它似乎没有用

<body>
<div class="container">
<p>Select Email templates below</p>

<!-- Mr/Mrs and Customer name field start here -->
  <form id="mainForm" name="mainForm">
    <input type="radio" name="gender" value="Mr. " />Mr.
    <input type="radio" name="gender" value="Mrs. " />Mrs.
    <textarea id="textarea" placeholder="Enter customer name here" oninput="renderYourText()"></textarea>
  </form>
<!-- Mr/Mrs and Customer name field end here -->

<!-- Email template drop down start here -->
<div class="button dropdown"> 
  <select id="colorselector">
     <option></option>
     <option value="Cancellation">Cancellation</option>
     <option value="Refund">Refund</option>
  </select>
</div>

<div id="Cancellation" class="colors red"> 

This is email template for cancellation

</div

<div id="Refund" class="colors red"> 

This is email template for refund

</div

</p>
 </div>

<!-- Email template drop down start here -->

<!-- Text area result box start here -->
Real time generated email template
<textarea class="form-control" rows="5" id="result" name="text"></textarea>
<!-- Text area result box end here -->

<!-- Jquery and Javascript start here -->
<script>
document.mainForm.onclick = function(){
  renderYourText()
}
function renderYourText(){
  var gender = document.querySelector('input[name = gender]:checked').value;
  var y = document.getElementById('textarea').value;
  var x = document.getElementById('Cancellation').value;
  document.getElementById('result').innerHTML ='Dear '+gender + y + ', \n \n' + x;
}

</script>
<!-- Jquery and Javascript end here -->

</body>

将单选按钮值+ textarea值+下拉值添加到单个文本区域

例：

Dear User,
<br>
<br>
dropdown value

Answer 1

你需要解决三个问题。

将onchange事件添加到<select>
获取所选选项值的方法是select.options[selectedIndex].value
第三个问题是你直接获得输入类型value的checkbox 。 它可能为null并抛出错误。 使用|| 运算符和选择元素后防止错误。

 document.mainForm.onclick = function(){ renderYourText() } function renderYourText(){ var gender = (document.querySelector('input[name = gender]:checked') || {}).value; var y = document.getElementById('textarea').value; var select = document.getElementById('colorselector'); var x = select.options[select.selectedIndex].value; document.getElementById('result').innerHTML ='Dear '+gender + y + ',' + x; }

 <body> <div class="container"> <p>Select Email templates below</p> <!-- Mr/Mrs and Customer name field start here --> <form id="mainForm" name="mainForm"> <input type="radio" name="gender" value="Mr. " />Mr. <input type="radio" name="gender" value="Mrs. " />Mrs. <textarea id="textarea" placeholder="Enter customer name here" oninput="renderYourText()"></textarea> </form> <!-- Mr/Mrs and Customer name field end here --> <!-- Email template drop down start here --> <div class="button dropdown"> <select id="colorselector" onchange="renderYourText()"> <option></option> <option value="Cancellation">Cancellation</option> <option value="Refund">Refund</option> </select> </div> <div id="Cancellation" class="colors red"> </div> <div id="Refund" class="colors red"> </div> </div> <!-- Email template drop down start here --> <!-- Text area result box start here --> <textarea class="form-control" rows="5" id="result" name="text"></textarea> <!-- Text area result box end here --> <!-- Jquery and Javascript start here --> <script> </script> <!-- Jquery and Javascript end here --> </body>

如何获得下拉到文本区域的值

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-04-11 02:56:45

如何获得下拉到文本区域的值

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-04-11 02:56:45

解决方案1
1 已采纳 2019-04-11 02:56:45