将组合框的值传递到同一页面的文本区域答案

【问题标题】：Value passing combobox to textarea of same page将组合框的值传递到同一页面的文本区域
【发布时间】：2014-04-02 15:21:16
【问题描述】：

今天我遇到了一个有趣的问题。我正在处理短信管理，所以我有一个下拉菜单来选择模板，在选择模板后，相同的文本应该出现在消息正文上，这是一个文本区域，并且在同一个 jsp 页面中。我的一些朋友建议我使用 Ajax，但我不知道 Ajax 能帮我解决这个问题。这是我的 select 和 textare 元素。

<select class="selectpicker form-control"name="grade" data-style="btn-primary">
    <option></option>
    <c:forEach var="grade" items="${gradeInfo}">
        <option value="${grade.getDropDownName()}">
            ${grade.getDropDownName()}
        </option>
    </c:forEach>
</select>

<div class="input-group input-group-lg" >
    &nbsp;&nbsp; <span class="input-group-addon">Message</span>
    <textarea class="form-control " rows="6" placeholder="Message" 
        style="height: auto;" id="MessageBox">
    </textarea>
</div>

这里的 dorpdown 值来自数据库。如果我选择一个值，相同的文本应该出现在 textarea 上。请帮助我。

【问题讨论】：

$('select').change(function(){ $('textarea').val( $(this).find('option:selected').text() ) });这里是演示jsfiddle.net/Ye5FG
您希望在文本区域中显示的文本...您的意思是选择值...
@AamirAfridi 非常感谢。，这是 javascript 还是 Jquery？
@NidhishKrishnan 是的，我想要选择值。 .
检查我的答案@user3377978

标签： javascript ajax jsp

【解决方案1】：

用 jquery 试试这个

使用可以使用JQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

代码

<script type="text/javascript">
$(document).ready(function() {

    $('select').change(function () {
        $('#MessageBox').val($(this).find('option:selected').text())
    });
});
</script>

Working Demo

如果你想在 div 中的 select 上加载任何模板试试这个

<script type="text/javascript">
$(document).ready(function() {

   $('select').change(function () {

    $.ajax({
    url: "some_server_action",
    type: "post",
    dataType: "json",
    data: null,
    async: false,
    success: function(data) {
    console.log('success');
            $('#MessageBox').val($(this).find('option:selected').text());
            $('#replace').html(data);   
    },
    error:function(){
          console.log('failure');
    }
    });
   });

});
</script>

【讨论】：

谢谢你。，我需要为此包含任何外部 jquery 链接吗？
如果你想你可以下载它并使用如果你想离线运行它......否则没关系你可以直接使用它

【解决方案2】：

这是一个解决方法：

如果您在选择选项的值中输入模板的 ID/名称或其他东西（网址）来识别数据库中的模板。

HTML

 <select class="selectpicker form-control"name="grade" data-style="btn-primary">
 <option></option>
 <c:forEach var="grade" items="${gradeInfo}">
     <option value="${grade.getDropDownName()}">
         ${grade.getDropDownName()}
     </option>
 </c:forEach>
 </select>


<div class="input-group input-group-lg" >
    &nbsp;&nbsp; <span class="input-group-addon">Message</span>
    <textarea class="form-control " rows="6" placeholder="Message" 
        style="height: auto;" id="MessageBox">
    </textarea>
</div>

Javascript

function updateTemplate(this) {
    $.ajax({
        url: "/template?name="+this.value
    }).done(function(data) {
        $( "#MessageBox").html(data);
    });
}

这可能需要一些工作来满足您的需求，但您可以从这里开始并查看有关 ajax 的 JQuery 文档：Here

【讨论】：