在jsp页面中显示选定的文本

Question

Hi I am a newbie in JSP and was trying to show the selected value in a header as a dynamic text. But every time I select it shows the option value not the text. below is what I have tried.

Html drop down

<select id="country" name="country_code">
       <option value="1">Puerto Rico</option>
       <option value="63">Philippines</option>
       <option value="others">Others</option>
</select>

JSP tag

    <%
        String countrycd = request.getParameter("country_code");
        String countryTxt = request.getParameter("country_code");
    %>

This is my script

    <script>
        document.getElementById("country").value = '<% out.print(countrycd); %>';
        var e= document.getElementById("country");
        var str = e.options[e.selectedIndex].text;
        alert(str);
    </script>

This is my html code where I need to show the selected text instead of value for example if user selects Philippines it should show as Philippines not the code 63

<h2>By Country: <% out.print(countrycd);</h2>

Any help would be really appriciated!

Thanks.

EDIT:

Current Output

From drop down philipines is selected in header it shows: By Country: 63

Expected output:

From drop down if philipines is selected it should show

By Country: Philipines not 63.

Answer 1

You're showing the value in the header. You could accomplish it by doing:

<h2>By Country: <span id="countryName"> </span> </h2>

And then your script should be:

<script>
  window.onload = function(){        
    document.getElementById("country").value = '<% out.print(countrycd); %>';
    var e= document.getElementById("country");
    var str = e.options[e.selectedIndex].text;

    document.getElementById("countryName").innerHTML = str;  //This line changed
  };
</script>

Instead of getting the country name with JSP, we do it with javascript (writing it inside the countryName span)

Cheers, from La Paz, Bolivia

Answer 2

The behavior of the select component in HTML is to send the value of the selected option when the form is posted rather than the display text. You can achieve your objective in one of 2 ways:

Change the select like this:

   <select id="country" name="country_code">
       <option value="Puerto Rico">Puerto Rico</option>
       <option value="Philippines">Philippines</option>
       <option value="Others">Others</option>
   </select>

Or if the value represents an id of the country in a database you can look it up when the form is posted and get the name of the country that way.