document.getElementByIdの値を別のfunctionで使用する方法を教えて下さい

解決済

質問者：yamahaka_ionaru
質問日時：2018/07/17 14:28
回答数：1件

⑤の「開く」を押すと④で選択された要素に対応した⑥以降のメニューがダイアログに表示されるというプログラムを書きたいのですがdocument.getElementByIdが上手く動いてくれません

最初の挙動としては　'#dlg'+no　のno初期値に100が入っているので開くを押すとダイアログには要素1のメニューが表示されます。noを200や300に変えるとちゃんと対応したメニューが開きます

しかしセレクトボックス経由でnoを書き換えるとダイアログが開かなくなってしまいます。
そこで試しに$( '#dlg'+no )を$( '#dlg'+nn)に書き換えnn経由で開く事にし、セレクトボックスでnoをいじり③の出力を見るとdocument.getElementByIdはdialog()内で対応した数字をちゃんと拾ってくれています。(セレクトで要素3を選ぶと300とalertします)

また、$( '#dlg'+no )を$( '#dlg'+100 )や$( '#dlg'+200 )にしても対応したメニューが開きます
ただ$( '#dlg'+no )にするとどうしてもダイアログが開かなくなってしまいます・・
自分では( '#dlg'+no )＝dlg100になってると思うのですが内部ではそうでないみたいで・・

どうか良い方法はないでしょうか？

まとめますとセレクトした要素に対応したメニューをダイアログに表示するというプログラムになります。

<head>
<script>

var no = 100;//①
vay nn = 100;//②

function youso(){
no = document.getElementById("list").value;
}

jQuery( function() {
$( '#dlg'+no ) . dialog( {

buttons: {'決定': function() {

alert(no);//③

//ダイアログ内の処理

},

'取消': function() {

//キャンセルして閉じる

$( this ) . dialog( 'close' );},},

});});

//ダイアログを開く
function dlgOpen(){$( '#dlg'+no ) . dialog( 'open' );}//ダイアログオープン

</script>
</head>

<body>

<form><select id="list" onchange="youso()">　　　　④

<OPTION value="100">要素1</OPTION>
<OPTION value="200">要素2</OPTION>
<OPTION value="300">要素3</OPTION>

<SELECT></form>

<input type="button" value="開く" onclick="dlgOpen()" />　⑤

<div id="dlg100" >　　　　　　　　　　　　⑥～

要素1のメニュー

</div>

<div id="dlg200" >

要素2のメニュー

</div>

<div id="dlg300" >

要素3のメニュー

</div>

</body>

通報する

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

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Ogre7077
回答日時：2018/07/17 15:36

ページ読み込み時の処理 jQuery( function() { ... } ) で行っている内容は、

ダイアログ機能の初期化と推測します。
ですが、すべてのダイアログを対象とすべきところを、
ご提示のソースでは一つしか行っていません。

以下のように、可能性のあるすべてを対象に初期化しては如何でしょうか

jQuery(function(){
_ $('#list option').each(function(){
_ _ var sel = '#dlg' + $(this).val();
_ _ $(sel).dialog({button:{初期化パラメーター}});
_ });
});