HTML/JS：在 JavaScript 中更改选择选项值
我有一个带有两个选项的下拉选择菜单。基本上我使用 JavaScript 获取所选下拉选项的值并粘贴到文本区域。这是我的代码：
$(document).ready(function () {
$('#pdSev').change(function () {
$('#textarea').html($("#pdSev option:selected").text());
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<select id="pdSev" name="pdSev">
<option selected disabled class="test">Incident Severity</option>
<option value="test">Test</option>
<option value="test2">Test2</option>
</select>
<textarea id="textarea" class="textarea is-rounded has-fixed-size" placeholder="Example"></textarea>
到目前为止，当我从选择菜单中选择一个项目时，这目前是有效的，选项值被复制到纹理字段中。
但是，我希望将选项值替换为段落而不是只包含一个词，例如：
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
在 JS 中做这样的事情最好的方法是什么？
HUH函数2回答
-
胡子哥哥
在此示例中，我已将 的设置value为该test option段落。现在textarea包含值而不是文本。$(document).ready(function () { var text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."; $('option[value="test"]').val(text); $('#pdSev').change(function () { $('#textarea').html($("#pdSev option:selected").val()); })});<body> <select id="pdSev" name="pdSev"> <option selected disabled class="test">Incident Severity</option> <option value="test">Test</option> <option value="test2">Test2</option> </select> <textarea id="textarea" class="textarea is-rounded has-fixed-size" placeholder="Example"></textarea></body><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -
子衿沉夜
根据您的问题和另一个答案的评论，这是您实现目标的方法；$(document).ready(function () { $('#pdSev').change(function () { if ($('#pdSev').val() == 'test') { var text = 'additional text'; $('#textarea').val(text); } else if ($('#pdSev').val() == 'test2') { var text = 'text for this statement'; $('#textarea').val(text); } })});<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><select id="pdSev" name="pdSev"> <option selected disabled class="test">Incident Severity</option> <option value="test">Test</option> <option value="test2">Test2</option></select><textarea id="textarea" class="textarea is-rounded has-fixed-size" placeholder="Example"></textarea>从这里您可以继续构建您的else if声明并满足您的需求。例如，如果您添加了一个，test3您将更新if statement为看起来像；if ($('#pdSev').val() == 'test') { var text = 'additional text'; $('#textarea').val(text);} else if ($('#pdSev').val() == 'test2') { var text = 'text for this statement'; $('#textarea').val(text);} else if ($('#pdSev').val() == 'test3') { var text = 'here is a new statement'; $('#textarea').val(text);}.val()请注意和之间的区别.text()。.val()将在 VALUE 内部查找，其中.text()将在选项标签之间查找 TEXT；如下;<option value="VALUE">TEXT</option>因此，在if statement我提供的内容中，它将.text()值放在文本框中——但是如果你想让它把.val()值放在文本框中，只需更新我必须.text()去的地方.val()——如果这有意义的话？
随时随地看视频慕课网APP
相关分类
JavaScript