Solved

Display special characters inside select box

Posted on 2004-04-02
8
678 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
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…

862 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

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now