我的老師要我用 JavaScript 和 HTML 創建這個程式，其中陣列值顯示在下拉串列中，然后當我單擊下拉值時，它會在下拉串列下方的段落中顯示我單擊的下拉值. 我已經創建了包含陣列值的下拉串列。（要顯示下拉值，首先您必須單擊顯示“單擊此處”的按鈕）
如何獲得我單擊以顯示在下拉串列下方的下拉值？
這就是我所擁有的：
var up = document.getElementById('geeks');
var down = document.getElementById('gfg');
var select = document.getElementById("arr");
var gr10 = ["Math 10", "Science 10", "Social 10", "English 10", "Math 20", "Computer Science 10", "Computer Technology 10", "Art 10"];
// Main function
function GFG_Fun() {
for (var i = 0; i < gr10.length; i ) {
var optn = gr10[i];
var el = document.createElement("option");
el.textContent = optn;
el.value = optn;
select.appendChild(el);
}
down.innerHTML = "Elements Added";
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p id="geeks"></p>
<select id="arr">
<option value="1">Select Course</option>
</select>
<br>
<br>
<button onclick="GFG_Fun();">
Click Here
</button>
<br>
<p id="gfg" ></p>
<script src="script.js"></script>
</body>
</html>uj5u.com熱心網友回復：
好吧，簡單的 plnkr：https ://plnkr.co/edit/B0X1xV2JXnUWLaGu ? preview
<script >
var up = document.getElementById('geeks');
var down = document.getElementById('gfg');
var select = document.getElementById("arr");
select.addEventListener('input', e => down.innerText = e.target.value )
var gr10 = ["Math 10", "Science 10", "Social 10", "English 10", "Math 20", "Computer Science 10", "Computer Technology 10", "Art 10"];
// Main function
function GFG_Fun() {
for (var i = 0; i < gr10.length; i ) {
var optn = gr10[i];
var el = document.createElement("option");
el.textContent = optn;
el.value = optn;
select.appendChild(el);
}
down.innerHTML = "Elements Added";
}
</script>
uj5u.com熱心網友回復：
我解決了它，但在我看來，您應該先嘗試尋找答案，或者至少讓我們了解您迄今為止嘗試過的內容。我不確定，但感覺就像你要求做功課一樣。
我只添加了以下部分來快速解釋它是如何完成的。您可能想要修改它以獲得所需的結果。
// --------------------
GFG_Fun();
$('#arr').change(function() {
var newText = $('#arr option:selected').val();
$('#gfg').append('<p>' newText '</p>')
});
// --------------------
這是作業解決方案：
var up = document.getElementById('geeks');
var down = document.getElementById('gfg');
var select = document.getElementById("arr");
var gr10 = ["Math 10", "Science 10", "Social 10", "English 10", "Math 20", "Computer Science 10", "Computer Technology 10", "Art 10"];
// Main function
function GFG_Fun() {
for (var i = 0; i < gr10.length; i ) {
var optn = gr10[i];
var el = document.createElement("option");
el.textContent = optn;
el.value = optn;
select.appendChild(el);
}
down.innerHTML = "Elements Added";
}
// --------------------
GFG_Fun();
$('#arr').change(function() {
var newText = $('#arr option:selected').val();
$('#gfg').append('<p>' newText '</p>')
});
// --------------------<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<p id="geeks">
</p>
<select id="arr">
<option value="1">Select Course</option>
</select>
<br><br>
<button onclick="GFG_Fun();">
Click Here
</button>
<br>
<p id="gfg">
</p>
<script src="script.js">
</script>
</body>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/331438.html
標籤：javascript html 数组 落下