Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Display special characters inside select box

Posted on 2004-04-02
8
680 Views
Last Modified: 2012-06-21
I use javascript to populate two select boxes, now if i put some text directly in an option tag then it display fine on the page, but if i tried to create a new option object and add it to the select via javascript the special character is not converted.

myArray['Area'] = new Array('cm²','m²');  // should be superscript number 2

<select>
<option>cm&#178;</option>  // this works
</select

any ideas?
0
Comment
Question by:jkna_gunn
  • 2
  • 2
  • 2
  • +1
8 Comments
 
LVL 12

Expert Comment

by:venkateshwarr
ID: 10739533

This works...

<SCRIPT LANGUAGE="JavaScript">
<!--
var myArray=new Array();
myArray['Area']=new Array('cm&\#178\;','m&\#178\;');
document.write("<select> <option>"+myArray['Area']+"</option> </select>");

//-->
</SCRIPT>
0
 
LVL 12

Expert Comment

by:venkateshwarr
ID: 10739535

For individual elements

document.write("<select> <option>"+myArray['Area'][1]+"</option> </select>");
0
 
LVL 6

Author Comment

by:jkna_gunn
ID: 10739549
im populating the select boxes from javascript several times,so the select object already exists.
see code below :

var myNewOption = new Option(myArray[i],myArray[i]);
selectbox1.options[selectbox1.length] = myNewOption;

0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 6

Author Comment

by:jkna_gunn
ID: 10739789
ok i worked in out, incase anyone else needs to know this
in order for it to display special characters properly do this.

var superscriptnum2 = String.fromCharCode(178);
then you can add this to the new option method

REQUEST TO CLOSE THIS QUESTION
0
 

Expert Comment

by:tjbriere
ID: 10872029
<html>
<head>
<title></title>
</head>
<body>
<form name="formname">Enter new value here:
<select name="units">
<option value="cm">cm&#178;</option>
<option value="in">a</option>
<option value="ft">b</option>
<option value="m">c</option>
<option value="mm">d</option>
</select><br>
<input type="button" value="view new option values" onClick="viewvals()">
<input type="button" value="set new option values (hard coded - see html source)" onClick="changevals()">
<hr>
enter the new text here:<input type="text" name="texthere" value="feet">
enter the new value here:<input type="text" name="valuehere" value="cubic_feet">
Enter the option number here: (0-4)<input type="text" name="optionhumberhere" value="3" size="4">
<input type="radio" name="radio1" value="none">none
<input type="radio" name="radio1" value="sq">&#178;
<input type="radio" name="radio1" value="cu" checked>&#179;
<input type="button" value="Change Select Option" onClick="SetValue(document.formname.optionhumberhere.value, document.formname.texthere.value, document.formname.valuehere.value)">
<hr>
<input type="button" value="change option 3 (fourth option) to inches squared" onClick="setSS()">
</form>
<script language="javascript"><!--
// this is the critical part:
sq=String.fromCharCode(178);
cu=String.fromCharCode(179);
//
function SetValue(index_number, new_text, new_value){
    if (document.formname.radio1[0].checked) {
            append_value = "";
            }
    if (document.formname.radio1[1].checked) {
            append_value = sq;
            }
    if (document.formname.radio1[2].checked) {
            append_value = cu;
            }
    newvalue=new_text+append_value;
    //alert(newvalue);
    document.formname.units.options[index_number].text=newvalue;
    document.formname.units.options[index_number].value=new_value;      
}
function setSS(){
    document.formname.units.options[3].text='inches'+sq;
    document.formname.units.options[3].value='inches_squared';
}
function changevals(){
      document.formname.units.options[0].text='in'+sq;document.formname.units.options[0].value="inches_squared";
      document.formname.units.options[1].text='cm'+cu;document.formname.units.options[1].value="cm_cubed";
      document.formname.units.options[2].text='ft'+cu;document.formname.units.options[2].value="feet_cubed";
      document.formname.units.options[3].text='ft'+sq;document.formname.units.options[3].value="feet_squared";
      document.formname.units.options[4].text='m'+sq; document.formname.units.options[4].value="meters_squared";
}
function viewvals(){
      valuesout='';
      valuesout=valuesout+'text of option  0 = '+document.formname.units.options[0].text+'\r';
      valuesout=valuesout+'value of option 0 = '+document.formname.units.options[0].value+'\r';
      valuesout=valuesout+'text of option  1 = '+document.formname.units.options[1].text+'\r';
      valuesout=valuesout+'value of option 1 = '+document.formname.units.options[1].value+'\r';
      valuesout=valuesout+'text of option  2 = '+document.formname.units.options[2].text+'\r';
      valuesout=valuesout+'value of option 2 = '+document.formname.units.options[2].value+'\r';
      valuesout=valuesout+'text of option  3 = '+document.formname.units.options[3].text+'\r';
      valuesout=valuesout+'value of option 3 = '+document.formname.units.options[3].value+'\r';
      valuesout=valuesout+'text of option  4 = '+document.formname.units.options[4].text+'\r';
      valuesout=valuesout+'value of option 4 = '+document.formname.units.options[4].value+'\r';
      valuesout=valuesout+'\r';
      valuesout=valuesout+'Hope this helps!  :-)';
      alert(valuesout);
}
/*
  // I left this garbage in here in case you want to view the values:
  // alert(document.formname.units.options[2].text);
  // alert(document.formname.valuehere.value);  

  //t=document.formname.units.options[0].text;
  //alert(t.charCodeAt(2));

  //nw="in"+String.fromCharCode(178);
  //nw=fromCharCode(178);
  //document.write(String.fromCharCode(179))
*/
//--></script>
</body>
</html>
0
 

Expert Comment

by:tjbriere
ID: 10872070
I didn't see the request to close the question until I was about to post the answer...

I thought I'd upload it anyway in case someone else wants to see a hands-on example of how it can be done.  it's fairly self-explanatory once the html file is opened, tried, and the source is viewed.
0
 
LVL 1

Accepted Solution

by:
Computer101 earned 0 total points
ID: 11112902
PAQed, with points refunded (125)

Computer101
E-E Admin
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

792 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question