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

Question

今天，我遇到了一个有趣的问题。 我正在进行SMS管理，因此我有一个下拉菜单来选择模板，选择模板后，应该在消息正文中显示相同的文本，该消息正文是一个文本区域，并且位于同一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值来自database。 如果我选择一个值，则文本区域上应显示相同的文本。 请帮助我。

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

工作演示

如果要在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>

Answer 2

这是一种解决方法：

如果在选择选项的值中放入模板的ID /名称或其他内容（URL）以在数据库中标识模板。

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

这可能需要一些工作来填补你的需要，但你可以从这里开始，检查的jQuery关于Ajax的文档： 这里