Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Display special characters inside select box

Posted on 2004-04-02
8
Medium Priority
?
690 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

636 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