如何随下拉列表值的变化而改变javascript变量的值？

我在javascript中创建了一个名为“text”的变量，它从下拉菜单中获取值

var text = document.getElementById("dropdown").value;

但是当我加载脚本时，

var text

只接受下拉列表的默认值。即使我更改了下拉列表的值，变量的值也保持不变。我希望变量的值随着下拉列表的值的变化而变化。我在阅读答案后更新了javascript

var text= "hi i am a coder";
var dropdown = document.getElementbyId("dropdown");
dropdown.addEventListener("change", function(){
text = dropdown.value;
});

var storyTextarea = document.getElementById("storytext");
storyTextarea.value = text;

在阅读了答案后，我尝试了上面的代码，但没有成功。我希望

var text

通过在下拉列表中进行更改来更改它的值，然后一个id=“storytext”的文本框根据变量的值更新它的值。请帮忙。我是javascript新手，请解释一下。我将非常感谢你。HTML-

<select id="dropdown">
    <option value="text 0">...Select Paragraph...</option>
    <option value="text 1">text1</option>
    <option value="text 2">text2</option>
    <option value="text 3">text3</option>
    <option value="text 4">text4</option>
</select>

<div class="typebox">
            <textarea id="storytext" name="storytext" class="form-control" type="text" readonly="readonly" rows="3"></textarea>
        </div>

…选择段落。。。
文本1
文本2
文本3
文本4

您应该在下拉元素中添加一个更改侦听器。试试这个例子：

<h1>Current <span id="current"></span></h1>

<select id="animals">
  <option value="dog">Doge</option>
  <option value="cat">Ket</option>
</select>

---

希望有帮助！：）

当您在开头声明变量文本并为其赋值时，当您在下拉列表中更改元素时，值不会更改。您必须附加一个onchange操作，并在onchange函数中赋值。

假设下拉列表的html是这样设置的

<select id="dropdown">
   <option value="text 0">...Select Paragraph...</option>
   <option value="text 1">text1</option>
   <option value="text 2">text2</option>
   <option value="text 3">text3</option>
   <option value="text 4">text4</option>
</select>
<div class="typebox">
   <textarea id="storytext" name="storytext" class="form-control" type="text" readonly="readonly" rows="3"></textarea>
</div>

---

gender.addEventListener

用于将更改事件附加到下拉列表。您可以在codepen上查看它

您需要在下拉列表中附加一个

onchange

事件，然后将当前值保存在文本变量中。您可以为下拉列表共享HTML吗？不一定需要onchange。请看一看w3school-的这个样本。无论如何，您都应该能够读取该值。在刚才共享的示例中，javascript函数

myFunction

仅在单击按钮时运行。因此，如果用户更改了选择选项，然后单击按钮，它将获取下拉列表（选择选项）的当前值@user8235202我已经编辑了我的答案，您所犯的错误是将此语句

storyTextarea.value=text在更改功能之外。您知道，我说过每当用户更改选项时，onchange事件都会运行，因此
storyTextarea
的值的更改也应该发生在该函数中
var elem = document.getElementById('animals');
var currElem = document.getElementById('current');

currElem.innerHTML = elem.value;

animals.onchange = function(e) {
   currElem.innerHTML = e.target.value;
}

<select id="dropdown">
   <option value="text 0">...Select Paragraph...</option>
   <option value="text 1">text1</option>
   <option value="text 2">text2</option>
   <option value="text 3">text3</option>
   <option value="text 4">text4</option>
</select>
<div class="typebox">
   <textarea id="storytext" name="storytext" class="form-control" type="text" readonly="readonly" rows="3"></textarea>
</div>

var text= "hi i am a coder";
var dropdown = document.getElementById("dropdown");
var storyTextarea = document.getElementById("storytext");
storyTextarea.value = text;
dropdown.addEventListener("change", function(){
text = dropdown.value;
  storyTextarea.value = text;
});