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值来自数据库。如果我选择一个值，则相同的文本应该在textarea上显示。请帮助我。

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>

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

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

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

将组合框传递到同一页面的textarea的值

2 个答案: