Question

我有以下页面 enter image description here

CODE

<table border="0" cellspacing="1" cellpadding="1" id="echipajucator" title="Echipa Jucator">
    <tr>
        <th><div align="left"><span>Echipa</span></div></th>
    </tr>
</table>

<table cellspacing="2" cellpadding="1" id="echipa">
    <tr>
        <td>
            <select name="selectechipa" id="select" onclick="check_list()">
                <option value="AC Milan" id="milan">Milan</option>
                <option value="Juventus" id="juve">Juventus</option>
                <option value="Napoli" id="nap">Napoli</option>
                <option value="Bayern Munchen" id="bmun">B.Munchen</option>
                <option value="Real Madrid" id="realm">Real Madrid</option>
                <option value="Valencia" id="vale">Valencia</option>
                <option value="P.S.G" id="psg">PSG</option>
                <option value="Arsenal" id="ars">Arsenal</option>
                <option value="Man. Untd" id="manutd">Man. United</option>
                <option value="Chelsea" id="chls">Chelsea</option>
            </select>
        </td>
    </tr>
</table>

当我提交表格时，我得到了这张表

enter image description here

<form name="atrbjucator">
<table>
    <% 
        response.setContentType("text/html");
        String docType = "<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 " + "Transitional//EN\">\n";
        String title = "Parametrii Jucator";
    %>
    <% out.println(docType +
            "<html>\n" +
            "<head><title>"+title + "</title></head>\n"+
            "<body bgcolor=\"#FDF5E6\">\n" +
            "<h1 align=center>" + title + "</h1>\n" +
            "<table border=1 align=center>\n" +
            "<tr bgcolor=\"#FFAD00\">\n" +
            "<th>Nume Parametru<TH>Valoare Parametru"); 
        %>
    <%-- http://www.roseindia.net/tutorial/servlet/useBeanInServlet.html --%>
    <tr><td>Nume</td><td>${jucator.nume}</td></tr>
    <tr><td>Prenume</td><td>${jucator.prenume}</td></tr>
    <tr><td>Varsta</td><td>${jucator.varsta}</td></tr>
    <tr><td>Pozitie</td><td>${jucator.pozitie}</td></tr>
    <tr><td>Echipa</td><td>${jucator.selectechipa}</td></tr>
    <%

我想要做的是在提交的表格中根据所选团队的名称（AC米兰）添加一个小图标。

PS： java，javascript，jsp，javabeans的基础知识

我尝试在jsp页面中使用表格

创建一个javascript

function loadImages() {
            if (document.getElementById("select")) {        
                document.getElementById("milan").src = "/HTML-CODE/icons/milan.png";
                document.getElementById("juve").src = "/HTML-CODE/icons/juventus.png";
                document.getElementById("nap").src = "/HTML-CODE/icons/napoli.png";
                document.getElementById("bmun").src = "/HTML-CODE/icons/bayern.png";
                document.getElementById("realm").src = "/HTML-CODE/icons/madrid.png";
                document.getElementById("vale").src = "/HTML-CODE/icons/valencia.png";
                document.getElementById("psg").src = "/HTML-CODE/icons/psg.png";
                document.getElementById("ars").src = "/HTML-CODE/icons/arsenal.png";
                document.getElementById("manutd").src = "/HTML-CODE/icons/machester.png";
                document.getElementById("chls").src = "/HTML-CODE/icons/chelsea.png";       
            }
        }

我在body上添加了函数onload =“loadImages（）”但是我没有图像。

Answer 1

只使用javascript，不使用jsp。

<script>
function changeimage(choice){
document.getElementById('icon').src=choice + ".png";
}
</script>

<img src="" id="icon" width='52' height='50'>


<table cellspacing="2" cellpadding="1" id="echipa">
        <tr>
            <td>
                <select name="selectechipa" id="select" onchange="changeimage(this.value);">
                    <option value="AC Milan" id="milan">Milan</option>
                    <option value="Juventus" id="juve">Juventus</option>
                    <option value="Napoli" id="nap">Napoli</option>
                    <option value="Bayern Munchen" id="bmun">B.Munchen</option>
                    <option value="Real Madrid" id="realm">Real Madrid</option>
                    <option value="Valencia" id="vale">Valencia</option>
                    <option value="P.S.G" id="psg">PSG</option>
                    <option value="Arsenal" id="ars">Arsenal</option>
                    <option value="Man. Untd" id="manutd">Man. United</option>
                    <option value="Chelsea" id="chls">Chelsea</option>
                </select>
            </td>
        </tr>
    </table>

使用此javascript函数更改图像，确保将图像命名为它们的选项值。我正在使用的扩展名为.png，如果您在.png中没有图像，则可能必须使用if-else条件。就像你在png中拥有尤文图斯的形象一样，将其全部视为jpg，

if (choice=="Juventus") image="Juventus.png";
else image= choice+".jpg";

你的功能现在有

document.getElementById('icon').src=image;

最好将选项值更改为"Juventus.png", "AC Milan.jpg",，然后剥离扩展服务器端。

Answer 2

我做到了！

<script type="text/javascript">
        function loadImage() {
                if (document.getElementById("jucatorechipa").innerHTML == "AC Milan") {
                    icn.src="HTML-CODE/icons/AC Milan.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Arsenal") {
                    icn.src="HTML-CODE/icons/Arsenal.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Bayern Munchen") {
                    icn.src="HTML-CODE/icons/Bayern Munchen.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Chelsea") {
                    icn.src="HTML-CODE/icons/Chelsea.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Juventus") {
                    icn.src="HTML-CODE/icons/Juventus.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Man. Untd") {
                    icn.src="HTML-CODE/icons/Man. Untd.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Napoli") {
                    icn.src="HTML-CODE/icons/Napoli.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "PSG") {
                    icn.src="HTML-CODE/icons/PSG.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Real Madrid") {
                    icn.src="HTML-CODE/icons/Real Madrid.png";
                }
                if (document.getElementById("jucatorechipa").innerHTML == "Valencia") {
                    icn.src="HTML-CODE/icons/Valencia.png";
                }
        }
    </script>

在此处使用此脚本：

<tr><td>Echipa</td><td><span id="jucatorechipa">${jucator.selectechipa}</span> <img align="top" id="icn"/></td></tr>

提交表单后加载图像

2 个答案: