動態改變<label>的文本<select>

我在JSP文件上有以下代碼，我希望名爲'complemento'的<label>的文本根據名爲'tipo'的<select>中選擇的選項進行更改。 javascript代碼中是否有任何錯誤，因爲當我在瀏覽器中打開頁面時，它不能按需要工作。動態改變<label>的文本<select>

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
     <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title>Cadastra Usuario</title> 

     <script> 
      function mudaTexto(tipo) { 
       var opcao_index = tipo.selectedIndex; 
       var opcao = tipo.options[opcao_index].value; 
       if(opcao == '0') 
        document.getElementById('complemento').innerHTML = 'Periodo'; 
       else if(opcao == '1') 
        document.getElementById('complemento').innerHTML = 'Titulo'; 
       else 
        document.getElementById('complemento').innerHTML = 'Status'; 
      } 
     </script> 

     </head> 
     <body> 

     <p align="center"> 
      <span class="usuario">${nome}</span> | <strong> Hora Livre</strong> | <a href="/hora_livre/ProcessaSaida"> Sair</a> 
     </p> 

     <p align="center"> 
      <form method="post" action="/hora_livre/CadastraUsuario"> 
      <table> 
       <tr> 
        <td>Login: </td> <td><input type="text" name="username"></td> 
       </tr> 
       <tr> 
        <td>Digite uma Senha: </td> <td><input type="password" name="password">  
        </td> 
       </tr> 
       <tr> 
        <td>Repita a Senha: </td> <td><input type="password" name="senha"></td> 
       </tr> 
       <tr> 
        <td>Tipo de usuario: </td> 
        <td> 
        <select name="tipo" onchange="mudatexto(this.form.tipo)"> 
         <option value="0">Aluno</option> 
         <option value="1">Professor</option> 
         <option value="2">Funcionario</option> 
        </select> 
        </td> 
       </tr> 
       <tr> 
        <td>Nome Completo: </td> <td><input type="text" name="name"></td> 
       </tr> 
       <tr> 
        <td><label for="complemento">Periodo</label></script></label> </td> 
        <td> <input type="text" name="complemento"></td> 
       </tr> 
       <tr colspan=2> 
        <td><input type="submit" value="Enviar"></td> 
       </tr> 
      </table> 
     </form> 
     </p> 

    </body> 
</html>

來源

2014-02-19 Kleber Mota

您沒有id = complemento的元素。通過將ID您輸入修復它

<td><label for="complemento">Periodo</label></script></label> </td> <td><input id="complemento" type="text" name="complemento"></td>

還利用價值，而不是innerHTML的，因爲它是一個輸入端

if(opcao == '0') 
    document.getElementById('complemento').value= 'Periodo'; 
else if(opcao == '1') 
    document.getElementById('complemento').value= 'Titulo'; 
else 
    document.getElementById('complemento').value= 'Status'; 
}

來源

2014-02-19 10:41:35

謝謝，現在它工作完美。 –

mudaTexto，不mudatexto。您必須正確拼寫函數名稱。 JavaScript區分大小寫。

你的POST請求返回：

{ 
    "ok": true, 
    "error": false 
}

您還沒有一個元素有這樣的ID，只是名字。

並且不要使用.innerHTML。這是.value。

經過測試和工作。

來源

2014-02-19 10:39:12

確定爲安德烈說。

您要更改文本的標籤的名稱爲complemento，但您正在查找ID爲complemento的元素，因此它不起作用。

然後，功能名稱是區分大小寫像其他人說，mudatexto應該mudaTexto和你想訪問TIPO，彷彿它定義一個id屬性，但它只能有一個名稱; this.form.tipo將無法正常工作，而是使用this.value，那麼您的用於tipo的html將看起來像這樣;

<select name="tipo" onchange="mudaTexto(this.value)"> 
    <option value="0">Aluno</option> 
    <option value="1">Professor</option> 
    <option value="2">Funcionario</option> 
</select>

你可以嘗試安德烈的解決方案，也可以使用document.getElementsByName()[0]代替document.getElementById()，這將是這樣的;

function mudaTexto(tipo) { 
    var opcao_index = tipo.selectedIndex; 
    var opcao = tipo.options[opcao_index].value; 
    if(opcao == '0'){ 
     document.getElementsByName('complemento')[0].innerHTML = 'Periodo'; 
    }else if(opcao == '1'){ 
     document.getElementsByName('complemento')[0].innerHTML = 'Titulo'; 
    }else{ 
     document.getElementsByName('complemento')[0].innerHTML = 'Status'; 
    } 
}

也;你應該看看使用angularjs，它將消除任何需要使用JavaScript或jQuery來做這樣的事情。

來源

2014-02-19 11:02:22 pythonian29033

動態改變<label>的文本<select>

回答

相關問題