Combobox só funciona no primeiro elemento da Tabela, estou usando java script

Front-end JavaScript
, , , ,
#1

Estou tendo um problema com o funcionamento do combobox, no jsp eu estou passando como parametro para o javascript o “id do arquivo” + o valor do “option”, na primeira linha da tabela todas as opçoes funcionam, porém quando coloco mais de um arquivo os debaixo não funcionam. segue abaixo o cdg html e o javascript.

HTML
<c:forEach var="lista" items="${listaArquivos}"> 
    			<tr>
    				<td>${lista.nome}</td>
					<td>${lista.nomeExt}</td>
					<td>${lista.tamanho}</td>
					<td>${lista.materia}</td>
					
					<td>
						<select id=cbAcoes>
				  			<option value="">Ações</option>
							<option value=${lista.idArquivo}+0> Abrir</option>
				    		<option value=${lista.idArquivo}+1> Baixar</option>
				    		<option value=${lista.idArquivo}+2> Compartilhar</option>
				    		<option value=${lista.idArquivo}+3> Excluir</option>
				    	</select><br>
				    </td>
				</c:forEach>

JAVASCRIPT

window.onload = cdAcao;

function cdAcao(){
	var iChoice = document.getElementById("cbAcoes");
	iChoice.onchange = function(){
		var str = iChoice.value;
		var id = str.substring(0,str.indexOf("+"));
	    var value = str.substring(str.indexOf("+")+1, str.length);
	    if(value == "0"){
			location.href="abrirArquivo?id="+id;
		}
		
	    if(value == "1"){
			location.href="baixarArquivo?id="+id;
		}
		if(value == "2"){
				window.prompt("Aperte Ctrl+C ", "http://130.206.120.135:9000/baixarArquivo?id="+id);
		}
		if(value == "3"){
			location.href="excluirArquivo?id="+id;
		}
	}
}
#2

O que ocorre é que quando você executa essa função cdAcao() ele vai pegar sempre o primeiro item do elemento que possui o ID cbAcoes.

Em que momento você executa essa função cdAcao()?

#3

ela é executada quando o usuário escolhe uma opção do combobox.

Sem%20t%C3%ADtulo
Sem título.png1573×442 14.5 KB

nesse primeiro item da tabela as 4 opçoes funcionam, nos demais itens nao pega.

#4 
$("#cbAcoes").change(function(){
var id = $("#cbAcoes option:selected").val();
});

Se você aciona depois que seleciona algo então use essa função.

#5

não funcionou aqui , simplesmente as opções pararam de funcionar.

#6

Você está importando Jquery na sua pagina?

#7

não uso jquery, mas vlw pela ajuda, mas resolvi de outra forma.

inves de colocar o combobox na tabela, modifiquei para ele pegar o valor de um radio button na tabela e assim executar a ação!

JAVASCRIPT

window.onload = cdAcao;

function cdAcao(a){

var iChoice = document.getElementById("cbAcoes");
var idRadio = a.value;

iChoice.onchange = function(){
    var id =  idRadio;
    var str = iChoice.value;
    
    if(id == undefined){
        alert("Selecione um arquivo primeiro!")
        return false;
    }
    else if(str == "0"){
        location.href="abrirArquivo?id="+id;
    }
    
    else if(str == "1"){
        location.href="baixarArquivo?id="+id;
    }
    else if(str == "2"){
            window.prompt("Aperte Ctrl+C ", "http://130.206.120.135:9000/baixarArquivo?id="+id);
    }
    else if(str == "3"){
        location.href="excluirArquivo?id="+id;
    }
    
}

}

HTML

<select id="cbAcoes">
    <option value="">Ações</option>
    <option value="0"> Abrir</option>
    <option value="1"> Baixar</option>
    <option value="2"> Compartilhar</option>
    <option value="3"> Excluir</option>
</select>

                    <td>
                        <input type="radio" value="${lista.idArquivo}" name="rb" onchange="cdAcao(this)" required><br>
                    </td>
                </c:forEach>
        </table>
Nome Extensão Tamanho Disciplina Ação
${lista.nome} ${lista.nomeExt} ${lista.tamanho} ${lista.materia}