使用 javascript 中的选择选项 onchange 更改 Textarea 内容答案

【问题标题】：Textarea content change with select option onchange in javascript使用 javascript 中的选择选项 onchange 更改 Textarea 内容
【发布时间】：2016-02-25 12:00:17
【问题描述】：

这是我的第一个问题，如果我做错了什么，我很抱歉。我有一个textarea 和一个选择。我想更改我在选择中更改选项时输入的textarea 内容。但是当我在选择中更改回上一个选项时，我希望 textarea 显示我之前输入的内容。

例如，当我在选择中选择“英文”选项时，我希望 textarea 显示“英文文本”。然后当我选择“法语”时，我希望textarea 显示“法语文本”，但是当我再次选择“英语”选项时，textarea 需要再次显示“英语文本”。

编辑：我需要将数据存储在服务器端，以便可以从任何计算机读取！很抱歉没有早点定义它。

这是我的 HTML 代码：

<select class="dropdown no-border" id="dropdownLanguage">
     <option>Choose language</option>
     <option>English</option>
     <option>French</option>
 </select>

 <textarea name="agencyDescription" id="agencyDescription" class="about-agency" placeholder="Write something about your agency..." maxlength="5000">
     <?php echo $agency->getData('agencyDescription'); ?>
 </textarea>

@OliverRadini 的 JS 代码：

var languageDropdown = document.getElementById("dropdownLanguage");
var lastSelected = languageDropdown.options[languageDropdown.selectedIndex].value

console.log(lastSelected);

languageDropdown.onchange = function(){

    var textBox = document.getElementById("agencyDescription");    
    currentText = textBox.value;

    var selected = this.options[this.selectedIndex].value;

    //load the current text into the last selected value
    sessionStorage.setItem(lastSelected, currentText);


    //load the new text in to the text box
    textBox.value = sessionStorage.getItem(selected);

    lastSelected = selected;
};

我想继续使用 JS 而不是 jQuery。先谢谢你了！

【问题讨论】：

localStorage 或 sessionStorage 可能会帮助你:)
Localstorage 就像@AhsN 所说的那样是个好主意，或者您可以将英语和法语文本存储在标记中的隐藏元素中
localStorage 有帮助，但我需要一个服务器端存储，以便可以访问其他设备上的数据

标签： javascript html server onchange

【解决方案1】：

这是我制作的小提琴，它可以工作，但如果它不完美，我会很感激反馈：

https://jsfiddle.net/szmnforr/

var languageDropdown = document.getElementById("dropdownLanguage");

var lastSelected = languageDropdown.options[languageDropdown.selectedIndex].value

console.log(lastSelected);

languageDropdown.onchange = function(){

    var textBox = document.getElementById("agencyDescription");    
    currentText = textBox.value;

    var selected = this.options[this.selectedIndex].value;

    //load the current text into the last selected value
    sessionStorage.setItem(lastSelected, currentText);


    //load the new text in to the text box
    textBox.value = sessionStorage.getItem(selected);

    lastSelected = selected;
};

挺难看的，我也不喜欢全局变量的使用，但基本可以用。

【讨论】：

完美运行！非常感谢！
我只是从 sessionStorage 更改为 localStorage，所以它可以持久化
这不是被接受的吗？我认为您应该在这里接受其中一个答案（不一定是我的）并在其他地方再次询问，否则将来回来的任何人都会感到困惑。
是的，我确实接受了它，但我编辑了我的问题（不想问一个非常相似的新问题），因为我需要将数据保存在服务器端，以便我可以在其他端访问它设备。不过，我会再次接受您的评论，因为它是最有帮助的。如果您能在服务器端存储方面帮助我，我将不胜感激！
好吧，我建议再问一个问题——人们不会因为有类似的问题而烦恼，我认为最好对问题进行适当的标记。不过，我很乐意尽我所能提供帮助 - 您的服务器上是否已经存储了任何数据？

【解决方案2】：

我不确定，但我认为这样的事情应该能达到你的预期......

<select class="dropdown no-border" id="dropdownLanguage">
   <option selected="selected">Choose language</option>
   <option value="0">English</option>
   <option value="1">French</option>
</select>

<textarea name="agencyDescription" id="agencyDescription" class="about-agency" placeholder="Write something about your agency..." maxlength="5000">            
</textarea>


<script type="text/javascript">

    var select = document.getElementById("dropdownLanguage");
    var selectArray = [];
    var textArray = ["english txt","french txt"];
    var tArea = document.getElementById("agencyDescription");

    select.onclick = function(){
       textArray[parseInt(select.options[select.selectedIndex].value)]=tArea.value;
    }
    select.onchange = function(){
       tArea.value = textArray[parseInt(select.options[select.selectedIndex].value)];
    }
</script>

【讨论】：

如果你想我可以稍后解释，我现在必须搬家