更改段落文本更改选择器 - JavaScript 中的选项

Question

>我正在尝试根据选择的选项更新我的段落，而无需使用提交按钮。所以我目前正在尝试通过onchange事件来做到这一点。但是我一无所获，有谁知道我在这里出了问题吗？

function selectR() {
document.getElementById("p").innerHTML = 'You Currently Have "RED" Selected!';
}
function selectG() {
document.getElementById("p").innerHTML = 'You Currently Have "GREEN" Selected!';
}
function selectB() {
document.getElementById("p").innerHTML = 'You Currently Have "BLUE" Selected!';
}

<select>
<option onchange="selectR()">Red</option>
<option onchange="selectG()">Green</option>
<option onchange="selectB()">Blue</option>
</select>
<p id="p">You Currently Have "RED" Selected!
<p>

Answer 1

一个非常简单的方法：

function onChangeSelectColour() {
var colourValue = document.getElementById("colourSelect");
var colourIndex = colourValue.options[colourValue.selectedIndex].value;
var colourMessage = '';
if (colourIndex == 1)
colourMessage = 'You Currently Have "RED" Selected!';
else if (colourIndex == 2)
colourMessage = 'You Currently Have "GREEN" Selected!';
else if (colourIndex == 3)
colourMessage = 'You Currently Have "BLUE" Selected!';
document.getElementById("p").innerHTML = colourMessage;
}

<select id="colourSelect" onchange="onChangeSelectColour()">
<option value="1">Red</option>
<option value="2">Green</option>
<option value="3">Blue</option>
</select>
<p id="p">You Currently Have "RED" Selected!<p>

Answer 2

function selected(){
	var index = document.getElementById("mySelect").selectedIndex;
switch(index) {
	case 0:
	document.getElementById("p").innerHTML = 'You Currently Have "RED" Selected!';
break;
case 1:
	document.getElementById("p").innerHTML = 'You Currently Have "GREEN" Selected!';
break;
	case 2:
	document.getElementById("p").innerHTML = 'You Currently Have "BLUE" Selected!';
break;
	
}
}

<select id="mySelect" onchange="selected()">
<option onchange="selectR()">Red</option>
<option onchange="selectG()">Green</option>
<option onchange="selectB()">Blue</option>
</select>
<p id="p">You Currently Have "RED" Selected!
</p>

Answer 3

你也可以以动态的方式构建它，然后你甚至不必担心if和else。像这样：

var select = document.getElementById('select'),
color  = document.getElementById('color');
select.addEventListener('change', function() {
	var selected = this.options[this.selectedIndex].value;
	color.innerHTML = selected;
});

<select id='select'>
<option defualt>Color</option>
<option value='red'>Red</option>
<option value='green'>Green</option>
<option value='blue'>Blue</option>
</select>

<p id="p">You Currently Have <span id='color'></span> Selected!<p>

Answer 4

//Add an id value to your select, set the function call to the select onchange event
<select id="ddlMySelect" onchange="selectChange();">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</select>
function selectChange() {
// Grab your select element
const selectElement = document.getElementById('ddlMySelect');
// Get the text value of the selected option
const selectedText = selectElement.options[selectElement.selectedIndex].text;
// Logic to change your paragraph text, this is actually over kill
// Just replace the text with the option text, see below comments
document.getElementById("p").innerHTML = 'You Currently Have ' + selectedText + ' Selected!';
}