セレクトボックスに文字列でないコードを埋め込み、表示させたい

###前提・実現したいこと
セレクトボックスを2つ作って一つ目の選択によって2つ目の内容が変わるという簡易なプログラムになります。
JSの中の★が付いている箇所に文字列でなく以下コードを記述（表示）したいのですが、どうやってもエラーになってしまいます。

■コード※自動で価格を読み込み表示させます。
<span class="msm-price msm-aid-210012">価格</span>

###発生している問題・エラーメッセージ

###該当のソースコード

<!--JS-->
<!--
function functionName()
{
var select1 = document.forms.formName.selectName1; //変数select1を宣言
var select2 = document.forms.formName.selectName2; //変数select2を宣言

select2.options.length = 0; 

if (select1.options[select1.selectedIndex].value == "regular")
{
select2.options[0] = new Option(<span class="msm-price msm-aid-210012">価格</span>);//★★エラーここを通常の文字列にすると正常に動作します★★
select2.options[1] = new Option("36枚(2畳用)");
}

else if (select1.options[select1.selectedIndex].value == "large")
{
select2.options[0] = new Option("8枚(1畳用)");
select2.options[1] = new Option("16枚(2畳用)");
}

}
//-->

goods = new Object();
 goods[0] =new setGoods("http://www.rakuten.co.jp/","regular",<span class="msm-price msm-aid-210012">価格</span>);//★★エラーここを通常の文字列にすると正常に動作します★★
 goods[1] =new setGoods("http://www.rakuten.co.jp/","regular","36枚(2畳用)");
 goods[0] =new setGoods("http://www.rakuten.co.jp/","large","8枚(1畳用)");
 goods[1] =new setGoods("http://www.rakuten.co.jp/","large","16枚(2畳用)");

 function setGoods(url,color,size,inch){
 this.url=url;
 this.color=color;
 this.size=size;
 this.inch=inch;
 }


 function searchURL(){
 var colorValue=document.getElementById("color").value;
 var sizeValue=document.getElementById("size").value;
 var url=document.getElementById("link_url");
 for(var i in goods){
 if(goods[i].color==colorValue && goods[i].size==sizeValue){
 return goods[i].url;
 }
 }
 return false;
 }
 function jump(){
 var url=searchURL();
 if(!url){
 alert("該当商品はありません");
return false;
 }
 location.href=url;
 return false;
 }
 
 
 
 
 <!--HTML-->
 <form name="formName" method="GET" action="./pathToProgramFile"> 
 <div class="select-box01">
商品:
<!--選択肢その1-->
<select name = "selectName1" id="color" onChange="functionName()">
<option value = "regular">レギュラーサイズ</option>
<option value = "large">ラージサイズ</option>
</select>
 </div>
 
 
 
 <div class="select-box03">
枚数: 
<!--選択肢その2（選択肢その1の項目によって変化）-->
<select name = "selectName2" id="size">
</select>
 </div>
 
 <div class="select-box02">
 <input id="submit_button" type="submit" onClick="return jump()" value="購入手続きへ"><br>
 </div>
 </form>

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)

行動規範の内容に同意します

回答1件

HTMLをそのまま入れることはできないと思います。

【option 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/option

JavaScript
1// 一応書くならこうかな、という書き方
2// select2.options[0] = new Option(<span class="msm-price msm-aid-210012">価格</span>);
3//                                 ↓                                                ↓
4   select2.options[0] = new Option('<span class="msm-price msm-aid-210012">価格</span>');

クラスを付けたければ下記のようにすれば出来ます。

JavaScript
1select2.options[0] = new Option('価格');
2select2.options[0].className = "msm-price msm-aid-210012";
3```**動くサンプル：**[https://jsfiddle.net/174hf36p/](https://jsfiddle.net/174hf36p/)

投稿2017/05/04 08:59

kei344

総合スコア69398

programdepon

2017/05/04 09:21

ご返答を頂きありがとうございます。残念ながら一応の方法では、そのままHTML文が表示されてしまい、classを付ける↓の方法では何も表示されず、といった状態でした…。

kei344

2017/05/04 10:15

> そのままHTML文が表示されてしまいはい、そうなります。HTMLを入れることはできません。文字列で渡すべきところに文字列以外のものを渡すコードだったので、それを是正しただけです。 > 何も表示されず https://jsfiddle.net/174hf36p/1/ 何も表示されない、というのはどういうことでしょうか。「価格」は表示されていると思いますが。デベロッパーツールでエラーの確認をしていますか？【Chrome デベロッパーツールの使い方概要 | Web Tips】 http://weback.net/utility/1410/

programdepon

2017/05/04 11:29

私の記述ミスでした。文字列「価格」は表示されております。ただ、私が行いたいことは文字列の表示でなく、コードから価格を呼び出して動的に値を表示させることになります。単に「価格」を表示させるだけでしたら、「select2.options[0].className = "msm-price msm-aid-210012";」というclassを入れる一文は不要と思われます。

kei344

2017/05/04 11:45

> classを入れる一文は不要と思われます。質問文のコードに入っていたので、クラスを付けたいのかと。動的に価格を、って価格についてのコードが書かれていないので当然では。

programdepon

2017/05/04 12:01

いえ、一文を切り抜いているため、お渡ししたコードだけでは動作しませんが、JSと紐付いて<span class="msm-price msm-aid-210012">価格</span>という一文のみで価格が表示されます。以下コードのみでも価格が読み出されているのがご確認いただけると思います、お教え頂いた記述ではそれができなかったという事になります。 -- <!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript"> window.msm = {}; window.msm.sid = 168933; </script> <script type="text/javascript" src="http://dn.msmstatic.com/article/handler.js"></script> <title>無題ドキュメント</title> </head> <body> <span class="msm-price msm-aid-468552">価格</span> </body> </html>

kei344

2017/05/04 12:07

コードを隠すようなことをされたら、まともな回答ができるわけ無いでしょう。回答は「option要素を他の要素のように扱えない」です。option要素はスタイルを変更する事も一部しかできません。

programdepon

2017/05/04 12:16

かしこまりました、要はoption要素の中でスタイルシートを正常に扱うことは出来ないということですね。ただ、表題として「文字列でないコードを埋め込み、表示させたい」「<span>～</span>の一文で自動で価格を読み込み表示される」と書いている訳ですから…。そもそも正常に扱えないのでしたら、コードの内容関係なく、そこですでに話は終わっている様な気がしますが…。すいません、なんか素直にありがとうございましたとは言えないです、ご返答頂いた限り、できると思い込み、この5，6時間を無駄にしてしまったので。。

kei344

2017/05/04 12:23

「解決済」にしたくないというのであれば、運営にコンタクトを採って記事削除を依頼されては？ https://teratail.com/contact/input

行動規範の内容に同意します