Solved

Display special characters inside select box

Posted on 2004-04-02
8
685 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
[X]
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
  • 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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 
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

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…

696 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