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>

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2014/08/25 19:24:30
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4972ベストアンサー獲得回数2154

ポイント100pt

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> よりも前にあっても問題ありません。

他7件のコメントを見る
id:a-kuma3

※varにあるselectstyleの後にある2は不要です。

あ、コメント、入れ違い (^^ゞ

2014/08/24 00:21:39
id:m0r1y055tan

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

2014/08/24 19:23:17

その他の回答1件)

id:a-kuma3 No.1

回答回数4972ベストアンサー獲得回数2154ここでベストアンサー

ポイント100pt

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> よりも前にあっても問題ありません。

他7件のコメントを見る
id:a-kuma3

※varにあるselectstyleの後にある2は不要です。

あ、コメント、入れ違い (^^ゞ

2014/08/24 00:21:39
id:m0r1y055tan

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

2014/08/24 19:23:17
id:pogpi No.2

回答回数428ベストアンサー獲得回数59

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

id:m0r1y055tan

pogpiさん
いつも有り難うございます。私は初心者なので、pogpiさんの回答は少し難しいです。でも有り難うございました。<(_"_)>

2014/08/21 22:57:56
  • id:jislotz
    回答の文章を書きかけていたのですが
    既に回答がついていたのでコメントで。

    http://allabout.co.jp/gm/gc/23930/5/
    質問者はこのへんを元に作ってるのかなと思いまして、
    私もsplitで文字列を分割するやり方をまず思いついたのですが、
    分割した後で気がかりなのが、
    document.getElementById('mystyle').href = cssfile;
    と同じノリで
    document.getElementById('myscript').src = jsfile;
    みたいに書いちゃっていいのか?ということです。

    <script>タグにid属性を書くのはHTML 4.01なんかだと文法エラーなので。
    HTML5だとどうなっているのか知らなかったので調べたら妥当になっているようですね。
    HTML文書の文法にこだわるなら文書型をHTML5にするか、
    それが嫌ならgetElementByIdじゃない方法で目的のscript要素を得るようにするか……
  • id:m0r1y055tan
    ジント兄さん
    コメントいただき有り難うございます!
    掲載いただいたリンク先といい、getElementByIdの記述といい、私が作成しているコーディングそのままだったので、全てを見透かされてるようでほんとに驚きました。おそらくString#splitを正しく記述しても、この問題でうまくいかない可能性があったのですね。有り難うございました!参考にさせて頂きます ^ - ^
  • id:jislotz
    document.getElementById('myscript').src = jsfile;
    みたいなのがHTML 4.01とかでうまく動くか動かないのかでいうと、うまく動くと言っちゃっていいぐらい、
    動かないブラウザを見つけるのは難しいと思います。
    でも質問の文章に「正しい記述方法」とあったので、一応このへんも触れておいた方がいいかなとは思いました。

    <script>タグにid属性を書かない場合、getElementByIdを使わない方法がいくつかあります。
    全部の方法を書くのはちょっとしんどいので、一番無難だと思うquerySelector()を使う方法だけ書きます。
    (確かめていないですが、IE8から動くはずです。)

    <link id="mystyle" href="css/style1.css">
    <script src="js/style1.js"></script>
    のように、IDをつけたlink要素の次に、アニメーションを読み込むためのscript要素を出現させたら、
    document.querySelector('#mystyle + script') でそのscript要素を得られますので
    document.querySelector('#mystyle + script').src = val[1];みたいに書けます。
  • id:a-kuma3
    document.querySelector() を使う手がありましたか(HTML の構造に依存するけど)。

    ぼんやりと、document.scripts をループで回して探すしかないかなあ、なんて思ってました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません