人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

select optionで選択すると、1選択につき、css fileとjs(=javascript) file の両方を読み込ませて、cssでデザイン、jsでアニメーションが読み込まれるhtmlを作成しています。
下記のように、1optionにつき複数valueを指定することができないため、正しい記述方法がありましたら教えてください。よろしくお願いします。
<select id="selectstyle" onchange="changesytle(value);">
<option value="css/style1.css" value="js/style1.js">スタイル1</option>
<option value="css/style1.css" value="js/style2.js">スタイル2</option>
</select>

●質問者: m0r1y055tan
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

url に含まれにくい文字で、css と javascript の url をつなげたものを value に指定して、String#split で、分割すれば良いと思います。
例えば、セミコロンで区切るとしたら。

<select id="selectstyle" onchange="changesytle(value);">
 <option value="css/style1.css;js/style1.js">スタイル1</option>
 <option value="css/style1.css;js/style2.js">スタイル2</option>
</select>



コメントを受けての、追記です。

簡単に、サンプルを書いてみました。

<script>
// 関数 changeStyle は、使ってる select よりも前にあっても大丈夫
function changeStyle(sel) {
 var opt = sel.options[sel.selectedIndex];
 var val = opt.value.split(";"); // セミコロンで option の value を分割する
 alert(val[0]); // ひとつめが、css の URL
 alert(val[1]); // ふたつめが、javascript の URL
}
</script>

<select id="selectstyle" onchange="changeStyle(this);"> <!-- this で select を関数に渡す -->
 <option value="css/style1.css;js/style1.js">スタイル1</option>
 <option value="css/style2.css;js/style2.js">スタイル2</option>
</select>

String#split は、その文字列を、引数に指定した文字で分割して、その分割された複数の文字列からなる 配列 を返します。

id:m0r1y055tan さんがコメントに書いたコードだと、こんな感じになります。

function myFunction() {
 var str = "css/style1.css;js/style1.js";

 var res = str.split(";"); // 文字列 str をセミコロンで分割

 document.getElementById("selectstyle").href = res[0]; // 分割されたひとつ目が、スタイルシートの URL
}

記述場所はselect optionのすぐ下でよいのでしょうか?

javascript の関数名は、最後に解釈されるので、<script> での定義が、実際に使われている <select> よりも前にあっても問題ありません。


m0r1y055tanさんのコメント
a-kuma3さん いつもお世話になってます! 早速回答してくださり感謝です? 実はあまりjavascriptに詳しくないので質問してしまいます。 string#splitとは、 <script> function myFunction() { var str = "css/style1.css;js/style1.js"; var res = str.split(","); document.getElementById("selectstyle").value = res; } </script> のように書くのでしょうか? 記述場所はselect optionのすぐ下でよいのでしょうか? (ネットサーフィンで少しかじりましたが、念のため質問させてください ^ - ^;)

a-kuma3さんのコメント
回答に追記しました♪

m0r1y055tanさんのコメント
a-kuma3さん 具体的なコードを教えてくださり有り難うございます♪ 実は、オプション1つに絞るのは無理かと思い始めてます。(> v <;) ww というのも、css と js の document.getElementByIdを指定するfunction関数名"changesytle()"を、css と js両方で同じ関数名を使用すると競合してしまい、オプション選択しても何も起こらないからです。少しかっこ悪いですが、select opotionを2つ作ることにしました。 でも、今後のためになる回答をいただいたので、後日ポイントは差し上げます♪ ^ - ^

a-kuma3さんのコメント
褒められたので、調子にのっちゃおうかな。 ヒヨコちゃんは、もう出てくる気がなさそうなので、そっちの回答も勝手に解説 <tt>:-)</tt> No.2 の回答で書かれている内容を、ソースコードに落とすと、こんな感じ。 >|html| <script> function changeStyle2(sel) { var css = ["css/style1.css", "css/style2.css"]; var js = ["js/style1.js", "js/style2.js"]; var opt = sel.options[sel.selectedIndex]; var val = opt.value; alert(css[num]); alert(js[num]); } </script> <select id="selectstyle" onchange="changeStyle2(this);"> <option value="0">スタイル1</option> <option value="1">スタイル2</option> </select> ||< ちょっと考えると、option の value と、Select.selectedIndex が同じ事に気が付くので、こう書くのが普通。 >|html| <script> function changeStyle2(sel) { var css = ["css/style1.css", "css/style2.css"]; var js = ["js/style1.js", "js/style2.js"]; var num = sel.selectedIndex; alert(css[num]); alert(js[num]); } </script> <select id="selectstyle" onchange="changeStyle2(this);"> <option>スタイル1</option> <option>スタイル2</option> </select> ||< 昔風の書き方、かな。 選択肢が増えたときのことを考えてみる。 option の文言 - 順番 - css - javascript が、セットになってるのに、あちこちに追加しなきゃいけない。 ましてや、後ろに追加するのじゃなくて、間に挿入するときなんか。 修正するときの手間(コスト)や、ミスが入る余地に、あまり気を配らない、というのが昔風。 Fortran や COBOL といった昔の言語では、配列の添え字は数値だけだったので、こういう風にしか書けなかった、というのもある。 今風は、修正のコストが高い(気を付けて修正する必要がある)のは、バグを誘発する原因のひとつなので、その option の value ではなく、配列として、定義を持ちたいのだ、ということならば、こういう感じかな。 >|html| <script> function changeStyle3(sel) { var def = { "style1" : { "css" : "css/style1.css", "js" : "js/style1.js" }, "style2" : { "css" : "css/style2.css", "js" : "js/style2.js" }, }; var opt = sel.options[sel.selectedIndex]; var key = opt.value; alert(def[key].css); alert(def[key].js); } </script> <select id="selectstyle" onchange="changeStyle3(this);"> <option value="style1">スタイル1</option> <option value="style2">スタイル2</option> </select> ||< これでも、option の文言と、定義がばらけてしまってる。 もう一歩進めると、こんな感じか。 >|html| <script> var def = { "style1" : { "caption" : "スタイル1", "css" : "css/style1.css", "js" : "js/style1.js" }, "style2" : { "caption" : "スタイル2", "css" : "css/style2.css", "js" : "js/style2.js" }, }; function changeStyle4(sel) { var opt = sel.options[sel.selectedIndex]; var key = opt.value; alert(def[key].css); alert(def[key].js); } function writeStyleOptions() { for(key in def) { document.writeln( "<option value=\"" + key + "\">" + def[key].caption + "</option>" ); } } </script> <select id="selectstyle" onchange="changeStyle4(this);"> <script> writeStyleOptions(); </script> </select> ||< option の value に css と javascript の URL を持つ場合と、コードを見比べてみるのも良いかも。

m0r1y055tanさんのコメント
a-kuma3さん す、すごい(@ v @) 有り難うございます! Javascriotはまだまだですが、a-kuma3さんの授業を受けたくなりました。わかりやすい!しかも編集リスクを最小限にする工夫ができるものなんですね ^ - ^ あ〜、私はまだまだ.....先が思いやられます;;。 ところで、教えていただいた通りにコーディングしてみました。 結果は.... (´・ω・`)>" 以下のscriptも併記しています。間違ってると思うのですが、どう直せばよいかわからないです。やっぱりネット掲載のコピーを少しいじるようではダメですねw <script src="js/style.js" type="text/javascript" id="myscript"></script> <script type="text/javascript"><!-- function changeStyle() { var selectstyle = document.getElementById("selectstyle"); var jsfile = selectstyle2.options[select.selectedIndex].value; document.getElementById('myscript').src = jsfile; } // --></script> 別の観点からもいろいろ調べてみようと思います。 ほんとにいろいろ有り難うございます! (=゚ω゚)ノ

m0r1y055tanさんのコメント
※varにあるselectstyleの後にある2は不要です。

a-kuma3さんのコメント
>> 以下のscriptも併記しています。間違ってると思うのですが、どう直せばよいかわからないです。 << 試してないですけど、selectstyle<span style="font-size:large; color: red;">2</span> になってるのが、ダメなんじゃないかな? >|html| <script src="js/style.js" type="text/javascript" id="myscript"></script> <!-- function changeStyle() { var selectstyle = document.getElementById("selectstyle"); // ★selectstyle2 になってますけど :-) var jsfile = selectstyle2.options[select.selectedIndex].value; document.getElementById('myscript').src = jsfile; } // --> </script> ||< >> やっぱりネット掲載のコピーを少しいじるようではダメですねw << 入り口は、そんなところからで良いのでは。 ぼくがやり始めたときに比べると、ネットにたくさんコードが転がっているので、良い時代だな、と思います。 まあ、たくさんある分、ちょっとどうかな、と思うものもあるわけですが、「ここが良くないんだな」というサンプルだと思えば、それも良い情報だったりするわけで <tt>:-)</tt>

a-kuma3さんのコメント
>> ※varにあるselectstyleの後にある2は不要です。 << あ、コメント、入れ違い (^^ゞ

m0r1y055tanさんのコメント
a-kuma3さん いろいろ有り難うございました♪ ^ - ^ なんとなくJavascriptはとっつきにくかったのですが、a-kuma3さんから頂いた構文を解読していくうちに、いつか自分でも応用して記述できるようになれるかも?と希望を持てそうです。 何かが悪さして今回はうまくいかなかったですが、ベストアンサーとさせていただきます。有り難うございました!"<(^ _ ^)>"

2 ● pogpi
●0ポイント

cssfilename = new Array('hoge1.css','hoge2.css');
valueは0,1,…でいいと思います。cssfilename[value]で参照。jsも同様に。


m0r1y055tanさんのコメント
pogpiさん いつも有り難うございます。私は初心者なので、pogpiさんの回答は少し難しいです。でも有り難うございました。<(_"_)>
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ