WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:javascript onChangeでチェック

0:[投稿] masako [2004/12/08 21:10 ][環境:IE6 わからない]

はじめまして

セレクトメニューでjavascriptで「onChange」をつかって値が変わるたびにチェックをかけたのですが異なる値を選択しないと
チェックが働きません

例)メニューに「1」、「2」、「3」とあったら
連続2回「2」を選択するとチェックがうごかない。

onClickでためしたところプルダウンの速度が速すぎでうまく選択
することができなくなってしまいました。
なにかこれらにかわるものはないでしょうか?
どなたか知っていたらおしえてください。


1:[回答] andi [2004/12/09 09:37 ]

onBlurとかダメですか?


2:[回答] masako [2004/12/09 11:09 ]

変更したタイミングでチェックをかけたいので
onBlurはちょっと・・・。


3:[回答] コトノハ [2004/12/09 12:29 ]

>異なる値を選択しないとチェックが働きません
>連続2回「2」を選択するとチェックがうごかない。

「チェンジ」してないですよね?

この説明だけ読むと当然の挙動だと思うのですが、
何が不具合なのでしょうか?


4:[回答] masako [2004/12/09 12:32 ]

レスありがとうございます
おっしゃるとおり「チェンジ」してないです。
しかしチェックをかけたいのです。


5:[回答] コトノハ [2004/12/09 12:39 ]

>おっしゃるとおり「チェンジ」してないです。
>しかしチェックをかけたいのです。

ごめんなさい。
まだ良く分からないです。

「2」から「2」でチェックを掛けたいとの事ですが、
その前に「2」に変更した時に既にチェックは掛かっているのでは?

つまり「2」→「2」でチェックされなくても、その前に例えば
「1」→「2」と動いた時にチェックが掛かっていると思うのですが。

それではダメなのでしょうか?


6:[回答]   [2004/12/09 13:27 ]

用途からして、select ではなく checkbox にするべきでは。
あとはonchangeイベントではなくonclickイベントにすればいい 。


7:[回答] masako [2004/12/09 14:05 ]

おっしゃるとおりなのですが、「2」→「2」の時も
チェックをかけて、selectでやりたいのです。
onclickも試しましたが、クリックした瞬間にチェックが
かかってしまい(あたりまえですが)選びずらくなってしまいました。


8:[回答]   [2004/12/09 14:19 ]

>>6 だけど、checkbox というのは間違いで radio に訂正。
同じ項目を連続で選択したいなら、radio の方が用途に適っている。
見かけは違うけど、機能は同じなのだからそれでも良いではありませんか。
select に拘らなければならない理由は何ですか?


9:[回答]   [2004/12/09 14:32 ]

あとは、selectメニューの選択によって直接決定するのではなく、
脇に配置したボタン(type="button")によって決定するようにするとか。

<select name="foo">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select><input
type="button" value="決定" onclick="bar()">


10:[回答] syota [2004/12/09 14:49 ]

私も同じような問題に遭遇したことがあります。
そのときは、onclickで逃げてしまいましたが・・・

onclickではセレクトボックスをクリックした瞬間にイベントが発生してしまいます。
そのときはイベントを発生させず、セレクトボックスのリストが展開されている状態で選択肢をクリックしたときにイベントを発生させたかったのですが、
onchangeでは選択肢を変更しないとイベントが発生しません。

なにかいい方法があれば、私も知りたいですね


11:[回答]   [2004/12/09 16:01 ]

>>10
>私も同じような問題に遭遇したことがあります。
>そのときはイベントを発生させず、セレクトボックスのリストが展開されている状態で選択肢をクリックしたときにイベントを発生させたかったのですが、

そういう操作方法の OS やアプリケーションを体験したことがありますか?
そもそもユーザー・インタフェイスの設計として矛盾していますし、不自然なのです。
仮に制作者が望むように実現できたしても、果たして利用者は直感的に使えるでしょうか。

用途からして >>8 か >>9 の方法をとるのが適切としか考えられません。
radio の方法は、選択項目を一望できるという点でメリットがあります。

ところでなぜ、連続的に同じ項目を選択する必要があるのでしょうか?
まずは原点のそこから解決しなければならないような気がしてきました。


12:[回答] コトノハ [2004/12/09 16:19 ]

代替方法を採る事が可能であれば、
私も >8 の方法で良いと思いました。


13:[回答]   [2004/12/10 16:00 ]

HTML 4.01仕様書を調べてみたら、option要素にもonclickイベントなどが扱えるようです。
Opera7 や Mozilla系で機能することを確認できましたが、IE6 では機能しません。
たとえ IE6 で機能したとしても、プルダウンメニューの形式ではあまり一般的な
イベント操作ではないので避けるべきでしょう。妥協して >>8 か >>9 の方法を模索して下さい。
もしくはselect要素にsize属性を付けて、「スクロール式リストボックス」にする手もあります。

# IE は、option要素のdisabled属性が効かなかったり、select関連が弱い癖があります。

<!ELEMENT OPTION - O (#PCDATA)         -- selectable choice -->
<!ATTLIST OPTION
 %attrs;                              -- %coreattrs, %i18n, %events --
 selected    (selected)     #IMPLIED
 disabled    (disabled)     #IMPLIED  -- unavailable in this context --
 label       %Text;         #IMPLIED  -- for use in hierarchical menus --
 value       CDATA          #IMPLIED  -- defaults to element content --
 >
<!ENTITY % attrs "%coreattrs; %i18n; %events;">
<!ENTITY % events
"onclick     %Script;       #IMPLIED  -- a pointer button was clicked --
 ondblclick  %Script;       #IMPLIED  -- a pointer button was double clicked--
 onmousedown %Script;       #IMPLIED  -- a pointer button was pressed down --
 onmouseup   %Script;       #IMPLIED  -- a pointer button was released --
 onmouseover %Script;       #IMPLIED  -- a pointer was moved onto --
 onmousemove %Script;       #IMPLIED  -- a pointer was moved within --
 onmouseout  %Script;       #IMPLIED  -- a pointer was moved away --
 onkeypress  %Script;       #IMPLIED  -- a key was pressed and released --
 onkeydown   %Script;       #IMPLIED  -- a key was pressed down --
 onkeyup     %Script;       #IMPLIED  -- a key was released --"
 >


14:[回答] ja [2005/04/09 07:15 ]

ちなみに・・

<!ENTITY % coreattrs
"id          ID             #IMPLIED  -- document-wide unique id --
 class       CDATA          #IMPLIED  -- space-separated list of classes --
 style       %StyleSheet;   #IMPLIED  -- associated style info --
 title       %Text;         #IMPLIED  -- advisory title --"
 >

<!ENTITY % i18n
"lang        %LanguageCode; #IMPLIED  -- language code --
 dir         (ltr|rtl)      #IMPLIED  -- direction for weak/neutral text --"
 >


15:[回答] マグ [URL] [2005/04/09 12:05 ]

初めまして、マグといいます。
以前から参考にしていました。

>onclickも試しましたが、クリックした瞬間にチェックが
>かかってしまい(あたりまえですが)選びずらくなってしまいました。

onClickがされたときにsetTimeOutで時間を遅らせて、チェック
させるようにさせることは出来ないでしょうか?
あまり、いい組み方ではないと思いますが・・・・・


16:[回答] マグ [URL] [2005/04/10 16:29 ]

暇だったので作ってみました。

<html lang="ja">
<script language="javascript">
<!--
var kakunin;
kakunin=0;
function Check()
{
kakunin +=1;
    if (kakunin==2)
    {
        //チェックボックスにチェックを入れる
        document.form1.check1.checked=true;
        //alert('実験');
        kakunin=0;
    }
}
//-->
</script>

<form name="form1">
<select onclick="Check();">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="checkbox" value="試し" checked name="check1">
</form>
</html>

このようなことをやりたいということでしょうか?


17:[関連] のっくん [MAIL] [2005/06/18 18:51 ]

連続的に同じ項目を選択したいケースに私も遭遇したので知恵をお借りしたい。SELECT内にDBより対象データを1件しかセットできなかった場合や複数件でもリンクして新ウインドウをオープン・クローズした場合など、再度選択ができないのです。


18:[回答] マグ [URL] [2005/06/19 11:29 ]

>SELECT内にDBより対象データを1件しかセットできなかった場合や複数件でもリンクして新ウインドウをオープン・クローズした場合など、再度選択ができないのです。

何が原因でそうなっているのか分かりませんが、
その原因のソースを記述してください。
文章だけでは、どのような仕掛けになっているか把握できません。


19:[お知らせ] のっくん [MAIL] [2005/06/19 11:45 ]

>17の件で他の掲示板にてselectedIndexに-1を与え初期化する事でonChangeでも再選択可能とわかり下記のように確認し解決した。
</HEAD>
<script language="javascript">
<!--
function Check(idx){
alert(form1.sel1[idx].text);
document.form1.sel1.selectedIndex = -1;
}
//-->
</script>
</HEAD>
<BODY>
<form name="form1">
<select name="sel1" onChange="Check(this.options.selectedIndex)">
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>  
</form>
</BODY>

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World