Question

我有3个功能（广播，文本区域和下拉菜单）我能够将radio和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>

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

示例：

Dear User,
<br>
<br>
dropdown value

Answer 1

您需要解决三个问题。

将onchange事件添加到<select>
获取所选选项价值的方法是select.options[selectedIndex].value
第三个问题是您直接获得输入类型为value的{{1}}。可能是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;
}

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

1 个答案: