変化画像ソース：DropDownListの選択

Question

私はドロップダウンボックスで選択されているものに応じて画像を変更できるようにしたい

...

私は、これは、画像を変更するコードをJS持っています。もちろん簡素化されています。

<script type="text/javascript"> 
     function changeImage() 
     { 
      var oDDL = document.all("ddlNAME"); 
      var NAME= oDDL.options[oDDL.selectedIndex].text; 

      switch(NAME) 
      { 
       case "Name": 
        document.getElementById("img").src="img1.png"; 
        break; 
       case "Name2": 
        document.getElementById("img").src="img2.png"; 
        break; 
       default: 
        document.getElementById("img").src="img3.png"; 
      } 
     } 
    </script> 

私はこの関数をDDL実装で呼び出します。

<asp:DropDownList ID="ddlNAME" runat="server" OnTextChanged="changeImage()" > 

しかし、何らかの理由でchangeImage()が発砲していません。それは、私は、これがnoobの質問ですけど、それは小さなものです...しかし、これはすべての使用javascriptの私の最初の日ですので、私と一緒にしてくださいクマ

'changeImage' is not a member of 'ASP.default_aspx' 

を言って私にエラーを与えています。ありがとう！

Answer 1

サーバー側のイベントを実行するように指示されているように、ASPXスクリプト内でchangeImage（）という関数を見つけようとしています。

クライアント側でJavascriptイベントを実行する必要があります。かわりにonChanged()イベントを使用してください。あなたはこれにあなたのドロップダウンコードを変更する必要があります

<asp:DropDownList ID="ddlNAME" runat="server" onChanged="changeImage();" > 

Answer 2

試してみてください。

<asp:DropDownList ID="ddlNAME" runat="server" onchange="changeImage()" > 

私はあなたがそれを使用している方法は、それは試してみて、JavaScriptの機能の代わりにクラスを呼び出して作っていると信じています。私はあなたの代わりにOnTextChanged

Answer 3

は、JavaScriptのためではないですが、ASP.Netイベントです。 .vbファイル内でVB関数のchangeImage()を探しています。

onChange="changeImage()"を試すことができます。

getElementById()などで検索する代わりに、関数内のthisキーワードを使用して、関数が実行されているオブジェクト（この場合はドロップダウンボックス）を参照することもできます。

Answer 4

OnTextChangedの

<asp:DropDownList ID="ddlNAME" runat="server" onchange="changeImage();" > 

を使用する必要があると思う

Answer 5

問題は、ドロップダウンリストがクライアント側コントロールではなくサーバー要素として扱われていることです。それが変更されると、ページ全体がサーバーにポストバックされます。これはサーバーのクラスでchangeImageというメソッドを探していて、見つからない場合はエラーを投げています。

さらに、document.allのようなものは避けたいと考えています。代わりにdocument.getElementByIdを使用してください。とりわけ、document.allはDOMレベル0の拡張であり、getElementByIdよりはるかに遅いです。

Answer 6

：

<asp:DropDownList ID="ddlNAME" runat="server" onchange="changeImage()" AutoPostBack="false" > 

のonchangeは、JavaScriptのイベントハンドラでは、あなたが使用していたEventHandlerは、ASP.NETコントロールのイベントハンドラです。AutoPostBack属性は、クライアントコードを明示的に実行したいときに、コントロールがポストバック（サーバーサイドコードを実行する）を起こさないようにするために必要です。

Answer 7

JavaScriptコードをページに登録してから、DropDownListの "OnChange"属性をJS関数に変更する必要があります。 "RegisterStartupScript"および "RegisterClientScriptBlock"セクションのread more hereにアクセスできます。