旅行好きのおしりトラブル対策グッズ3選

連想配列からセレクトボックスを生成する

解決済

  • 質問者：marlmalmal
  • 質問日時：
  • 回答数：1件

javascriptで連想配列から特定のキーについてセレクトボックスを生成することはできますか？
PHPの例文はあったのですができればjavascriptでやりたいと思っています。

連想配列↓
var profile = [
{
name : 'Aさん',
tall : '150cm',
like : '映画',
},
{
name : 'Bさん',
tall : '160cm',
like : '野球',
},
{
name : 'Cさん',
tall : '170cm',
like : 'テニス',
}
];

があるとして、<body>内に上記のnameだけを抽出したセレクトボックスを作りたいです。
上記の配列の内容はどんどん増えていく予定です。（Dさん、Eさん…というように）

↓めざす完成形
<select id="Namesct">
<option>Aさん</option>
<option>Bさん</option>
<option>Cさん</option>
</select>

どうかご教授いただきたく、よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「配列 JavaScript」に関するQ&A： PHP二次元配列をJavaScript配列へ変換

さらに表示

「JavaScript name」に関するQ&A： Javascriptでのbuttonのname属性、もしくはid属性を取得

「映画 スクリプト」に関するQ&A： ドイツ映画「嘆きの天使」のスクリプトや解説本について

A 回答 (1件)

No.1ベストアンサー

  • 回答者： yambejp
  • 回答日時：

idのついたselectは最初から定義されているのでしょうか？


またnameのないselectやvalueのないoptionでよいのでしょうか？

たとえば、こんな感じ
<script>
var profile = [
{"name":'Aさん',"tall":'150cm',"like":'映画'}
,{"name":'Bさん',"tall":'160cm',"like":'野球'}
,{"name":'Cさん',"tall":'170cm',"like":'テニス'}
];

window.onload=function(){
var n=document.getElementById("Namesct");
for(var i=n.options.length -1;i>=0;i--){
n.removeChild(n.options[i]);
}
for(var i=0;i<profile.length;i++){
var opt=document.createElement("option");
opt.appendChild(document.createTextNode(profile[i].name));
opt.setAttribute("value",profile[i].name);
n.appendChild(opt);
}

}
</script>
<form>
<p>
<select name="Namesct" id="Namesct">
<option>Xさん</option>
<option>Yさん</option>
<option>Zさん</option>
</select>
</p>
</form>
    • good
    • 0
    • 件
通報する
この回答へのお礼

素早いご回答有り難うございます。
望んでいたものがバッチリできました！
感謝いたします。

通報する
お礼日時：2013/04/17 13:10

このQ&Aに関連する人気のQ&A

「映画 スクリプト」に関するQ&A： 30代から勉強して、英語を習得された方いらっしゃいますか？

さらに表示

「JavaScript name」に関するQ&A： ボタンを動的にdisabledさせたいのですが

「配列 JavaScript」に関するQ&A： .txtファイルの読み込み

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するQ&A

関連するカテゴリからQ&Aを探す

専門家回答数ランキング

専門家

※過去一週間分の回答数ランキングです。

Q質問する（無料）

他の専門家の回答をチェック

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qselect要素のvalueを配列で取得したいです

select要素のvalueを配列で取得したく、下記のサンプルを動かそうと試みました。

<html>
<head></head>
<body>
<form>
<!-- ここに<select name="c1">～<select name="c20">の20個のselectがあるとする -->
</form>
<input type="button" value="はい" onclick="test(this.form)">

<script type="text/javascript">
function test ( form ) {
var values = new Array();
for ( var i=0; i < 20; i ++ ) {
var elm = form.elements['c'+i];
values[i] = elm.options[elm.selectedIndex].value;
}
}
</script>
</body>
</html>


このようなサンプルを動かそうとしたのですが、
var elm = form.elements['c'+i];のところの['c'+i]が正しくないようで
「elm is underfind」というエラーが出てしまいます

<script>
function myForm (form) {
var values = new Array();
for ( var i=0; i<20; i++ ) {
var elm = form.elements[i];
values[i] = elm.options[elm.selectedIndex].value;
document.write(values[i] + "<br />");
}
}
</script>
インデックス名を'c'+iからiにすると取得できるのですが、
ブラウザが読み込みをやめない状態になってしまいます。
select要素のnameはc1から始まりc20と何も換えていません。
何が間違っているのでしょうか。

select要素のvalueを配列で取得したく、下記のサンプルを動かそうと試みました。

<html>
<head></head>
<body>
<form>
<!-- ここに<select name="c1">～<select name="c20">の20個のselectがあるとする -->
</form>
<input type="button" value="はい" onclick="test(this.form)">

<script type="text/javascript">
function test ( form ) {
var values = new Array();
for ( var i=0; i < 20; i ++ ) {
var elm = form.elements['c'+i];
values[i] = elm.options[elm.selectedIndex].value;
}
}
</script>
</b...続きを読む

Aベストアンサー

具体的にはこんなかんじ

<script>
function test(f) {
var values = new Array();
for ( var i=0; i < 3; i ++ ) {
var elm =f.elements['c'+(i+1)];
values[i] = elm.options[elm.selectedIndex].value;
}
alert(values);
}
</script>
<form>
<select name="c1">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="c2">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="c3">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="button" value="はい" onclick="test(this.form)">
</form>

具体的にはこんなかんじ

<script>
function test(f) {
var values = new Array();
for ( var i=0; i < 3; i ++ ) {
var elm =f.elements['c'+(i+1)];
values[i] = elm.options[elm.selectedIndex].value;
}
alert(values);
}
</script>
<form>
<select name="c1">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="c2">
<option value=""></option>
<option value="1">1</option>
<option value="2...続きを読む

他の回答も見る

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか？
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、３つ以上なら
別途function化したほうが、可読性が高くなると
思います。

他の回答も見る

Qselectのnameが配列の場合

説明がわかりにくいかもしれませんがよろしくお願いいたします。
　
セレクトボックスが選択されると、テキストフィールドが変わるというJavaScriptを作成しています。
nameに配列を使った場合、elementsを使用すればいいと言うことまでは分かり１つだけの場合は成功しました。
しかし、同じname(配列)のセレクトボックスとテキストフィールドが複数ある場合は成功しません。
PHPでデータベースに格納する際に、どうしてもセレクトボックスとテキストフィールドは配列にして置かないといけないのですが、この場合どうすれば、成功するでしょうか？
現在以下のようにソースを書いて失敗しています。
ご教授の程よろしくお願いいたします。

↓↓JavaScript部分
<script>
function selectChange(){
var no = document.test1.elements['member[]'].selectedIndex;
if(no==1){
document.test1.elements['point[]'].value =0;
}
else{
document.test1.elements['point[]'].value ="";
}
}
</script>

↓↓HTML部分
<form name='test1'>
<select name='member[]' onChange='selectChange()'>
<option value='aaa'>aaa</option>
<option value='bbb'>bbb</option>
<option value='ccc'>ccc</option>
</select>
<input name='point[]' type='text'>
<br>
<select name='member[]' onChange='selectChange()'>
<option value='aaa'>aaa</option>
<option value='bbb'>bbb</option>
<option value='ccc'>ccc</option>
</select>
<input name='point[]' type='text'>
</form>

//bbbの場合だけ、テキストフィールドのデフォルト値を0にしたい

説明がわかりにくいかもしれませんがよろしくお願いいたします。
　
セレクトボックスが選択されると、テキストフィールドが変わるというJavaScriptを作成しています。
nameに配列を使った場合、elementsを使用すればいいと言うことまでは分かり１つだけの場合は成功しました。
しかし、同じname(配列)のセレクトボックスとテキストフィールドが複数ある場合は成功しません。
PHPでデータベースに格納する際に、どうしてもセレクトボックスとテキストフィールドは配列にして置かないといけないのですが、この...続きを読む

Aベストアンサー

サンプル。（区別の為にselectChangeを呼び出すときに何番目かを渡します）

<html>
<head>
<title></title>
</head>
<script type="text/javascript">
function selectChange(ObjIndex){
if(document.getElementsByName('member[]')[ObjIndex].selectedIndex ==1){
document.getElementsByName('point[]')[ObjIndex].value ='0';
}else{
document.getElementsByName('point[]')[ObjIndex].value ='';
}
}
</script>
<body>
<form name='test1'>
<select name='member[]' onChange='selectChange(0)'>
<option value='aaa'>aaa</option>
<option value='bbb'>bbb</option>
<option value='ccc'>ccc</option>
</select>
<input name='point[]' type='text'>
<br>
<select name='member[]' onChange='selectChange(1)'>
<option value='aaa'>aaa</option>
<option value='bbb'>bbb</option>
<option value='ccc'>ccc</option>
</select>
<input name='point[]' type='text'>
</form>
</body>
</html>

サンプル。（区別の為にselectChangeを呼び出すときに何番目かを渡します）

<html>
<head>
<title></title>
</head>
<script type="text/javascript">
function selectChange(ObjIndex){
if(document.getElementsByName('member[]')[ObjIndex].selectedIndex ==1){
document.getElementsByName('point[]')[ObjIndex].value ='0';
}else{
document.getElementsByName('point[]')[ObjIndex].value ='';
}
}
</script>
<body>
<form name='test1'>
<select name='member[]' onChange='selectChange...続きを読む

他の回答も見る

Q配列からプルダウン用のHTMLを生成

配列からプルダウン用のHTMLを生成するプログラムを作成しています。

結果としては
<option value="tomato">トマト</option>
<option value="onion">たまねぎ</option>
<option value="carrot">にんじん</option>
のHTMLが生成されるようにしたいのです。
（実際の画面表示はプルダウンになっています）


function createDropDownListByArray($key, $val ) {
　　$array_name = array(
　　　$key => $val,
　　);

　　foreach( $array_name as $key => $val ){
$tag .= '<option　value="' .　$key . '">' .　$val . '</option>' . "\n";
　　}
　　return $tag;
}

上記のようにつくってみましたが、この場合ファンクションを呼び出すと
１つずつしかHTMLを生成できません。　
再度ファンクションを呼び出すと、上書きされてしまいます。（当たり前ですが）
可変引数？(func_get_args())を使えないかとも思いましたが、できませんでした。
上記のように一度に全ての結果を表示したい場合、どのような記述に変えたらいいでしょうか？

詳しい方、どうか教えてください。
よろしくお願いします。

配列からプルダウン用のHTMLを生成するプログラムを作成しています。

結果としては
<option value="tomato">トマト</option>
<option value="onion">たまねぎ</option>
<option value="carrot">にんじん</option>
のHTMLが生成されるようにしたいのです。
（実際の画面表示はプルダウンになっています）


function createDropDownListByArray($key, $val ) {
　　$array_name = array(
　　　$key => $val,
　　);

　　foreach( $array_name as $key => $val ){
$tag .= '<option　value="' ....続きを読む

Aベストアンサー

createDropDownListByArray($key, $val )
この関数を呼んだ場合に生成される配列は
array($key => $val)になってますので
当然一組のoptionしか作られませんよね？

一番簡単な方法としては、他の方が回答されているように
関数に渡す引数を配列にするのが一番かと。

分かりやすく書くとこんな感じかな。
$fruit = createDropDownListByArray(array('tomato' => 'トマト', 'carrot' => 'ニンジン'));

で、関数の方も
function createDropDownListByArray(&$array_name) {
に修正して、
$array_name = array(
　$key => $val,
);
を削除すれば希望通りの動きになると思いますよ。

他の回答も見る

Qダブルクォーテーションのreplaceの方法

JavaScriptで文字を置換する際に
AAA = new String(AAA).replace(/ZZZ/g, "QQQ");
にしますよね、これで文字列中のダブルクォーテーション「"」を
任意の文字に変換したいのですが、何か良い方法はないでしょか？

よろしくお願いします。

Aベストアンサー

AAA.replace(/\"/g,"Q");
このように「"」の前に\をつけるといいですよ。

他の回答も見る

Qプルダウンメニューを別ファイルで管理するには？

いろんなページでプルダウンメニューをつけていると、更新とかのときにいちいち全てに手を入れなくてはならなくて大変なのですが、スタイルシートの時のように外部スタイルシートを読み込むみたいなことをしたいと思っているのですが方法がまだわかりません。ご教授をお願いします。また、そういうことを学習できるサイトとかがありましたら教えてください。

Aベストアンサー

「外部JavaScriptファイル」を使えば簡単にできます。
外部JSファイルは普通のテキストファイルで、拡張子は「js」にします。
これを読み込むには、HTMLのHEAD領域に、
　<SCRIPT language="JavaScript" src="外部JSファイル名.js"></SCRIPT>
と書きます。
この SCRIPT タグは、必ず閉じる必要があります。
そして、外部JSファイル内にプルダウンの設定を行う関数を書き、これを各HTMLから呼び出します。

No.1 の方法が正攻法だと思うのですが、どうも NN4 では思うようにならないので、別の方法も挙げておきます。
（OPTION は設定されるのですが、プルダウンの幅が短いままになってしまいます。）

■option.js
function drawOption(doc) {
　　doc.writeln('<OPTION value="送信値１">テキスト１');
　　doc.writeln('<OPTION value="送信値２">テキスト２');
}
※↑にOPTIONタグの内容を、そのまま書きます。

■HTMLのHEAD領域
<SCRIPT language="JavaScript" src="option.js"></SCRIPT>

■プルダウンを設置したい箇所
<SELECT …>
<SCRIPT language="JavaScript"><!--
　drawOption(document)
//--></SCRIPT>
</SELECT>

IE5.0/IE5.5/NN4.7/NN6.2 動作確認済み

「外部JavaScriptファイル」を使えば簡単にできます。
外部JSファイルは普通のテキストファイルで、拡張子は「js」にします。
これを読み込むには、HTMLのHEAD領域に、
　<SCRIPT language="JavaScript" src="外部JSファイル名.js"></SCRIPT>
と書きます。
この SCRIPT タグは、必ず閉じる必要があります。
そして、外部JSファイル内にプルダウンの設定を行う関数を書き、これを各HTMLから呼び出します。

No.1 の方法が正攻法だと思うのですが、どうも NN4 では思うようにならないので、別の方法も挙げて...続きを読む

他の回答も見る

Q連想配列を使ってコンボボックスを設定したい

JavaScriptの初心者です。

var cd_0001 = new Object();
cd_0001["0001"]="アフリカ";
cd_0001["0002"]="南アメリカ";
cd_0001["0003"]="カリブ海/南アメリカ";
cd_0001["0004"]="アジア";
cd_0001["0005"]="オセアニア";
上記のような連想配列があります。
これを使って以下のようなコンボボックスを
作りたいのです。

<select name="cmb">
<option value="0001" selected>アフリカ</option>
<option value="0001">フィルター</option>
<option value="0002">南アメリカ</option>
<option value="0003">カリブ海/南アメリカ</option>
<option value="0004">アジア</option>
<option value="0005">オセアニア</option>
</select>

コンボボックスを作成する部分はネットで検索し
見つけました。
ですが、連想配列から全てのKEYと値を
取得することができません。
どのようにすれば取得することができるのでしょうか？

意味わかりますか？
説明がわかりにくく申し訳ございません。

よろしくお願いします。

JavaScriptの初心者です。

var cd_0001 = new Object();
cd_0001["0001"]="アフリカ";
cd_0001["0002"]="南アメリカ";
cd_0001["0003"]="カリブ海/南アメリカ";
cd_0001["0004"]="アジア";
cd_0001["0005"]="オセアニア";
上記のような連想配列があります。
これを使って以下のようなコンボボックスを
作りたいのです。

<select name="cmb">
<option value="0001" selected>アフリカ</option>
<option value="0001">フィルター</option>
<option value="0002">南アメリカ</option>
<option valu...続きを読む

Aベストアンサー

for in を使ってできます。

var cd_0001 = new Object();
cd_0001["0001"]="アフリカ";
cd_0001["0002"]="南アメリカ";
cd_0001["0003"]="カリブ海/南アメリカ";
cd_0001["0004"]="アジア";
cd_0001["0005"]="オセアニア";

for(var X in cd_0001) {
alert(X + cd_0001[X])
}

参考URL：http://www.tohoho-web.com/js/statement.htm#stFor

他の回答も見る

QJavaScriptde途中で、「exit」するには？

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい！"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをＯＫで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか？

Aベストアンサー

>関数（kensaku()）からは抜けられませんでした。
そうですね、勘違いしていました、ｆ（＾＾；
すみません。
if(!s_data){
alert("キーワードを入れて下さい！");
return;
}
ですね。

他の回答も見る

Qスペースを検索したい

SQLで空白を検索するのは is nullだと思うのですが、
スペースを検索する方法ってありますか？
二つのパターンを区別して検索をかけたいのですが。

Aベストアンサー

「is null」は「null」を検索するものであって、
「空白を検索」するものではありません。

スペースの検索は、
＜検索対象＞ like '%　%'
です。
（%の間は全角スペース若しくは半角スペースです。
検索対象スペースに合わせてください。）

他の回答も見る

QgetElementByIdの戻り値がnullになります。

getElementByIdでdivタグのオブジェクトを取得したいのですが、nullとなってしまいます。
以下のコードのどこがいけないのでしょうか。
---
<div id='a'></div>

<script language="javascript">// <!--
var a_ = document.getElementById('a');
document.write(a_);
// --></script>
---

Aベストアンサー

さらに実験

<div id='a'></div>
<div></div>
<script type"text/javascript">// <!--
var a_ = document.getElementById('a');
document.write(a_);
// --></script>

これはnullですが

<div id='a'></div>
<div>あ</div>
<script type"text/javascript">// <!--
var a_ = document.getElementById('a');
document.write(a_);
// --></script>

これは[object]や[HTMLdivElement]が返りました。

他の回答も見る
ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング

おすすめ情報