Events tagged with <select><option>

Question

I’m trying to make a page with html+javascript, but I don’t know anything about php... Anyway, my question is this! I have created an options box, and when the user selects a certain option, I want to change a text... However, I cannot identify which option is selected ! Follow the code snippet!

Knob:

<select name="tOpcao" id="cOpcao" onchange="MudarOponente()">
            <option id ="cp1" value="p1"><script>document.write("Jose")</script></option>
            <option value="p1"><script>document.write("ola")</script></option>
            <option value="p1"><script>document.write(p1.nome)</script></option>

        </select>

Function Changeopponent()

function MudarOponente(){
if("Jose" == document.getElementById('cp1').value)
        alert("entrou no if");
}

It does not enter the if ever!!! Who can help, please... Thank you!

Answer 1

Why are you using blocks of script and document.write to write the options? What comparison are you trying to make in the MudarOponente?

I put in a code below what I understood you want.

I’m adding the event of onchange by javascript because if the script is loaded after the <select> the onchange will not find the function.

The value entered in <select> is the value of the attribute value of <option> selected, note that when I catch the this.value is alerted to the added value in the attribute value.

The this within the function refers to the <select> that invoked the action, so this.value to take his worth.

var selectOponente = document.getElementById('selectOponente');
selectOponente.addEventListener('change', function() {
	alert(this.value);
});

var formOponente = document.getElementById('formOponente');
formOponente.addEventListener('submit', function() {
  if(!this.nome.value) {
    alert('informe o nome pelo menos');
    return;
  }
  if(!this.valor.value) {
    this.valor.value = this.nome.value;
  }
  
  var opcao = document.createElement('option');
  opcao.value = this.valor.value;
  var textoOpcao = document.createTextNode(this.nome.value);
  opcao.appendChild(textoOpcao);
  
  selectOponente.appendChild(opcao);
  
  this.nome.value = null;
  this.valor.value = null;
});

<select id="selectOponente"></select>

<hr />

<form id="formOponente">
  <label>Nome</label> <br />
  <input name="nome" type="text"/>
  <br />
  <label>Valor</label> <br />
  <input name="valor" type="text" />
  <br />
  <input type="submit" value="Cadastrar" />
</form>

UPDATE

See that I put in it snippet update with a form to insert the values in a <select>. With pure javascript is something very "massante". I suggest that I study some javascript framework to help you do this in an easier way like jQuery, AngularJS, VueJS, AureliaJS, EmberJS and so on, there are many haha

Answer 2

Your mistake is in how to get the text from <option>.

                                       document.getElementById('cp1').textContent
                                                       |
                                                       |
<option id ="cp1" value="p1"><script>document.write("Jose")</script></option>
              |           |  |______________________________________|
            __|           |______                        |
           |                     |                       |
           |     document.getElementById('cp1').value    |
           |                                             |
document.getElementById('cp1').id      document.getElementById('cp1').innerHTML

In your case, to get the text on <option>, one should use document.getElementById('cp1').textContent, that is to say:

function MudarOponente(){
   if("Jose" == document.getElementById('cp1').textContent)
        alert("entrou no if");
}