- ベストアンサー
IDをclass名から取得したい
- HTML上でvalue値を日本語にしてスマートに値を取得したいため、value値でなくclass名でidnameに引き渡したいです。
- 試行錯誤して(value)を(className)に変えてみましたが、見当違いのようです。どうやらIDをclass名から取得する方法がわかりません。
- IDをclass名から取得する方法についてお知恵を拝借したく思います。
- rollbahn
- お礼率37% (6/16)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Webサイト</title> <body> <p> <select name="oya" id="hiragana" onchange="viewSubmenu(this);"> <option value="">---</option> <option value="日本語">あいう</option> <option value="英語">えおか</option> <option value="フランス語">きくけ</option> </select> </p> <br> <div id="a"> <select id="select01" onchange="text01(this);"> <option value="0" selected>選択して下さい</option> <option value="1">ああああ</option> <option value="2">いいいい</option> <option value="3">うううう</option> </select> <select id="select02" onchange="test(this);"> <option value="0" selected>選択して下さい</option> <option value="1">ええええ</option> <option value="2">おおおお</option> <option value="3">かかかか</option> </select> </div> <script type="text/javascript"> setView( 'a', '' ); function setView ( groupId, targetId ){ var i=0; var o; var objs = document.getElementById(groupId).getElementsByTagName('select'); while ( true ){ o = objs[i]; if (o == undefined) { break; } if ( o.id == targetId ) { o.style.display = 'inline'; } else { o.style.display = 'none'; } i = i + 1; } } function viewSubmenu (element) { setView ('a', {'日本語':'select01', '英語':'select02', 'フランス語':'select03'}[element.value]); } </script>
その他の回答 (3)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Webサイト</title> <body> <p> <select name="oya" id="hiragana" onchange="viewSubmenu(this,'a');"> <option value="">---</option> <option value="日本語">あいう</option> <option value="英語">えおか</option> <option value="フランス語">きくけ</option> </select> </p> <br> <div id="a"> <select id="select01" class="secondpulldown" onchange="text01(this);"> <option value="0" selected>選択して下さい</option> <option value="1">ああああ</option> <option value="2">いいいい</option> <option value="3">うううう</option> </select> <select id="select02" class="secondpulldown" onchange="test(this);"> <option value="0" selected>選択して下さい</option> <option value="1">ええええ</option> <option value="2">おおおお</option> <option value="3">かかかか</option> </select> <select id="select03" class="secondpulldown" onchange="test(this);"> <option value="0" selected>選択して下さい</option> <option value="1">きききき</option> <option value="2">くくくく</option> <option value="3">けけけけ</option> </select> </div> <script type="text/javascript"> setView( 'a', '' ); function setView ( groupId, targetId ){ var i = 0, o, objs = document.getElementById(groupId).getElementsByTagName('select'); while (o = objs[i++]) o.style.display = (o.id == targetId) ? 'inline': 'none'; } function viewSubmenu ( element, groupId ) { setView(groupId, {'日本語':'select01', '英語':'select02', 'フランス語':'select03'}[element.value]); } </script>
お礼
ありがとうございます！やりたいことが完全に解決しました。 すごく簡潔なサンプルをご提示いただいて驚いています。 むしろ複雑で長くなるのではないかと思っていました。 範囲をIDでセットして、その中のタグからIDを取り出して valueと一致させているということでしょうか？ ターゲットIDはdislplayがinlineやnoneになってる場合のみ繰り返して参照するということでしょうか？ 理解できない部分が多いので、じっくり研究したいと思います。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Webサイト</title> <body> <p> <select name="oya" id="hiragana" onchange="viewSubmenu(this);"> <option value="">---</option> <option value="select01" class="select01">あいう</option> <option value="select02" class="select02">えおか</option> <option value="select03" class="select03">きくけ</option> </select> </p> <br> <div id="a"> <select id="select01" class="secondpulldown" onchange="text01(this);"> <option value="0" selected>選択して下さい</option> <option value="1">ああああ</option> <option value="2">いいいい</option> <option value="3">うううう</option> </select> <select id="select02" class="secondpulldown" onchange="test(this);"> <option value="0" selected>選択して下さい</option> <option value="1">ええええ</option> <option value="2">おおおお</option> <option value="3">かかかか</option> </select> <select id="select03" class="secondpulldown" onchange="test(this);"> <option value="0" selected>選択して下さい</option> <option value="1">きききき</option> <option value="2">くくくく</option> <option value="3">けけけけ</option> </select> </div> <script type="text/javascript"> setView( 'a', '' ); function setView ( groupId, targetId ){ var i = 0, o, objs = document.getElementById(groupId).getElementsByTagName('select'); while (o = objs[i++]) o.style.display = (o.id == targetId) ? 'inline': 'none'; } function viewSubmenu ( element ) { setView('a', element.options[element.selectedIndex].className); } </script>
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
Firefox3は何もしなくても document.getElementsByClassName() を使えますが、 それ以外のブラウザでclassNameで取るのって、結構面倒ですよ？ prototype.jsを使えばdocument.getElementsByClassNameがほとんどのブラウザで使えるようになりますが、 prototype.jsの弊害っていうのもありますので、使うには注意が必要ですね。 （JavaなどではタブーとされるsuperClass改変を行っています） function getElementsByClassName(cn){ if(document.getElementsByClassName) return document.getElementsByClassName(cn); var elms=document.getElemetnsByTagName('*'); cn+=' '; for(var i=0,c,el=new Array();i<elms.length;i++){ c=elms[i].className+' '; if(c.search(cn)!=-1) el.push(elms[i]); } return el.length?el:null; } 未検証です。 getElementsByClassNameで検索すれば、詳しいサンプルコードが見つかると思います。
お礼
classNameで取ること事態が難しいということが わかって参考になりました。 idと同じ感覚でいました・・・。 jquery.jsをわけもわからず使用しておりますが、 ライブラリ使用に弊害がある場合があるのですね。 prototype.jsのことから調べて、サンプルコードを さがしてこようと思います。 どうもありがとうございました。
お礼
１つ１つを分かりやすく書いていただいて有難うございます。 javascriptを勉強し始めたばかりなのですが、 基礎を固めながら覚えていければと思っています。 大変参考になりました。 これからもう少しにらめっこしてみます。