我将如何根据所选选项动态更改文本区域？ [关闭]答案

【问题标题】：How would I go about dynamically changing a text area based on the option chosen? [closed]我将如何根据所选选项动态更改文本区域？ [关闭]
【发布时间】：2013-06-13 14:43:02
【问题描述】：

所以基本上我要做的是创建一个模板电子邮件表单来发送。用户可以从 html 文件或 mysql 数据库中已经存在的预定义模板的选项中进行选择。

一旦用户从选项中选择，文本将自动加载到已经准备好的文本区域中。

我正在使用 PHP、Jquery、Javascript 来构建它。

我正在调查一些 MC 编辑器，但尚未决定 html 是保存在文件中还是保存在 mysql 数据库中。

在这方面很新。我从哪里开始？

【问题讨论】：

标签： php jquery html ajax textarea

【解决方案1】：

change() 函数可用于查看 select 何时更改。然后，您可以检查所选选项的值并执行您需要执行的操作。快速示例：

<select>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>

还有你的 jQuery：

$("select").change(function() {
    if (this.value == "1") {
        console.log("User picked the first option");
        $("textarea").val("User picked option one!"); //Adds content to a textarea

        //make some ajax call
        $.ajax({
            url: "/call/",
            ...
            ...
            success: function() {
                //successful!
            }
        });
    }
});

这应该是做你需要的事情的一个很好的起点。

【讨论】：

是的，这就是我在前端想要的答案。所以我的下一个问题是，当用户进行选择时，我如何从 mysql 中提取数据并将其加载到 textarea 中？
AJAX 我的朋友，有很多关于它的教程:)
哈哈，当然，太棒了，感谢您的帮助，这正是我所需要的。
快速提醒，调试AJAX调用时一定要打开控制台，可以节省很多时间！

【解决方案2】：

我在这里做了一个jsfiddle

http://jsfiddle.net/rtP9c/8/

看看有没有帮助

<div id="email">
To <div class="template name">2</div><br/>

I am Jack's email template. I am a unique and beautiful <div class="template insect"></div>. Did you know that you are not your <div class="template possession"></div>.<br>

From <div class="template from"></div>
</div>

JS：

var email = {
    name : 'Tyler', 
    insect : 'butterfly', 
    possession : 'Khaki Pants', 
    from : 'Narrator'
};

$('.template').each(function(k,v){
   var template = $(this).attr('class').split(' ')[1];
    $(this).text(email[template]);
});

或通过 AJAX：

   $.ajax({
      url: 'http://site.com'
      dataType: 'json',
      data : data,
      success: function(data) {
        $('.template').each(function(k,v){
            var template = $(this).attr('class').split(' ')[1];
            $(this).text(data[template]);
        });        
      },
      error: function(status) {
        console.log(status);
      }
    });

【讨论】：