Solved

Display special characters inside select box

Posted on 2004-04-02
8
677 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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

759 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

22 Experts available now in Live!

Get 1:1 Help Now