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

//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!';
}

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

一种非常简单的方法：

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 4

你也可以用动态的方式构建它，然后你甚至不用担心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>

在选择器中改变选项的段落文本OnChange - JavaScript

4 个答案: