Events with the tag selectoption

0

I'm trying to make a page with html + javascript, but I do not know anything about php ... Anyway, my doubt is this! I have created a checkbox, and when the user selects that option, I want to change a text ... But I can not identify which option is selected! Follow the code!

Button:

<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>

Opposite Function ()

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

He does not enter if ever !!! Who can help, please ... Thanks!

    
asked by anonymous 05.11.2016 / 17:49

2 answers

1

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

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

I am adding the onchange event to the javascript because if the script is loaded after <select> onchange will not find the function.

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

The this within the function refers to the <select> that invoked the action, so this.value to get the value of it.

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

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

    
05.11.2016 / 18:30
1

Your error 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 in <option> , you must use document.getElementById('cp1').textContent , that is:

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