在 javascript 中使用 select 选项 onchange 更改文本区域内容

Question

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

例如，当我在 select 中选择 "English" 选项时，我希望 textarea 显示 "English text"。然后当我选择 "French" 我想要 textarea 显示 "French text"，但是当我再次选择 "English" 选项时， textarea 需要再次显示 "English text" .

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

这是我的 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。谢谢你，在前面！

Answer 1

我不确定，但我认为类似的东西应该能达到您的预期...

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

Answer 2

这是我制作的 fiddle，它可以工作，但如果它不完美，我将不胜感激反馈：

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

挺丑的，不太喜欢用全局变量，不过基本可以了

在 javascript 中使用 select 选项 onchange 更改文本区域内容

Textarea content change with select option onchange in javascript

html

javascript

onchange

server