選択ボックスのajax返信に応じてランダムイメージを取得しますか？

Question

私は現在以下のようなHTML選択ボックスを持っています。

<select name="item_1"> 
     <option value="0">Choose one...</option> 
     <option value="1">Value (1)</option> 
     <option value="2">Value (2)</option> 
     <option value="3">Value (3)</option> 
</select> 

私は次のことを行う必要があります。どちらの方法でも動作しますが、可能であれば両方を学びたいと思います。

A.

1. 、item_1と呼ばれる3倍異なる選択ボックスがありitem_2とitem_3を想像してみてください。
2. 現在のドキュメントのどの場所でもdiv（またはテーブル）を想像してみてください。
3. 選択ボックスの値が変更されるたびに、divにはオプション値のピクチャへのリンクが含まれている必要があります。

たとえば、 "item_1" selectboxで "Value（2）"を選択すると、divに2.jpgが印刷されます。他の選択ボックスで選択された値がある場合は、その画像も印刷する必要があります。

例： item_1 - >値（2） - item_2 - >値（3） - 出力 - > <のIMG SRC = "2.JPG">、<のIMG SRC = 3.JPG ">

どのように私はこの

B.行うことができます

、上記と同様の問題を除く;？代わりに、直接選択ボックスの値に応じて、画像リンクを印刷する、我々は我々にAJAX要求を行いますPHPファイル。PHPが追加を返す選択ボックス内の選択した値に関する情報。 （例えば、 "値2"を選択した場合、価格、在庫数、画像パスまたはデータベースからのw/eを得ることができます）

返される値によっては、2から印刷する代わりにデータベースからimage_path値を取得します。 jpg、my_cute_dog.jpgを印刷することがあります。

どうすればいいですか？あなたが私を導くことができれば嬉しいよ。

は、 アニル

Psとありがとうございました。 PHPをコーディングする必要はありません。 PHPのファイル名、パラメータ、メソッドを教えてください。 （POST推奨）。基本的なjQuery/JSのヘルプやガイダンスが必要です。

ps。 2必要に応じてdivに名前を付けることができます。

Answer 1

）（この内部document.readyを追加します。ドロップダウンリストの変更イベントにバインドします。次に、$(this).val()にアクセスして、新しく選択した値を取得します。

既存の画像のsrc属性を新しい値に変更できます。私はjQuery 1.7+のため、ここではpropを使用しています。新しいjQueryを使用しない場合は、代わりにattrを使用してください。

最後に、jQueryにはいくつかのAJAXメソッドが用意されています。 loadを選択しましたが、より細かい戻り値の制御には、getまたはajaxのようなもっと複雑なものを使用できます。 Loadは、基本的にサーバーから返されたものをすべて取り込み、一致する要素に埋め込みます。

http://jsfiddle.net/LHpJd/

//for select list with id of `select` 
$('#select').change(function() { 
    var value = $(this).val(); 
    //directly set value as html 
    $('#output').html(value); 

    //change image url source 
    $('#output img').prop('src', 'http://' + value); 

    //change image url source from server (expected return value is something like <img src="" /> 
    $('#output').load('myfile.php?' + value); 

}); 

Answer 2

jQueryを使用することを強くお勧めします。 これがあなたのHTMLだとします。

<select class="item_1"> 
    <option value="0">Choose</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    </select> 
    <select class="item_2"> 
    <option value="0">Choose</option> 
    <option value="1">Option 1</option> 
    <option value="2">Option 2</option> 
    <option value="3">Option 3</option> 
    </select> 

A：

$(document).ready(function() { 
    // Handler for first select box 
    $('.item_1').change(function() { 
     alert('Handler for item_1 called.'); 
    }); 
    // Handler for second select box 
    $('.item_2').change(function() { 
     alert('Handler for item_2 called.'); 
    }); 

}); 

B はいあなたはPHPやその他のサーバー側の言語を使用する必要があります。しかし、私は少し提案/質問がありますか？

返された値に応じて、我々はその代わりに印刷2.JPGの、それはmy_cute_dog.jpgを印刷することができる データベースからIMAGE_PATH値を取得します。

イメージパスを取得するために別のPHPファイルを呼び出す必要はありませんでした。PHPですべてを書き、JSONエンコードされたデータをjavascriptに戻すだけです。この場合、余分なボタンを追加することをお勧めしますが、これはオプションです。いくつかのコードを書くことができますがあなたの質問の最初の部分は簡単です

$('#get_data').bind('click', function() { 

    // get current values from select boxes. 
    var item_1 = $(".item_1").val(); 
    var item_2 = $(".item_2").val(); 

    //Sending AJAX POST Request. 
    $.post("example.php", { name: "value", name_2: "value_2" }, 
     function(data) { 
     alert(data); // print data | you can use this data. 
     }); 
});