選択ボックスのオプション値に基づいて画像のsrc値を変更します

酒飲み

imgタグと選択ボックスがあります

<img src="" name="image-swap">

<select name="kitchen_color" id="kitchen_color">
    <option value="/static/imag1.jpg">Red</option>
    <option value="/static/imag2.jpg">Black</option>
    <option value="/static/imag3.jpg">White</option>

</select>

選択ボックスの値に基づいて、imgタグのsrc値を変更する必要があります。

オプションREDを選択すると、オプションRed(/static/imag1.jpg)の値が画像のsrcに入力されます。

また、最初のオプション値をデフォルトの画像として選択します。

コードレバー
$(document).ready(function(){
   $("#kitchen_color").change(function(){
     $("img[name=image-swap]").attr("src",$(this).val());

   });

});

上記のコードを使用してください。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

選択ボックスのオプション値に基づいてビデオのsrc値を変更する方法

分類Dev

追加された選択ボックスの入力ボックスの値に基づいてオプションボックスを選択します

分類Dev

反応中の別の選択ボックスの値に基づいて、選択ボックスのオプションを動的にロードします

分類Dev

選択オプションの値に基づいてテキストボックスの値を動的に変更する

分類Dev

入力ボックスの数値に基づいて選択ボックスオプションを選択します

分類Dev

変数の出力に基づいて選択ボックスオプションを変更する

分類Dev

選択オプションの値に基づいてajaxURLを変更する

分類Dev

別の選択ボックスの値に基づいて選択ボックスのオプションを動的にロードしますが、依存選択はデフォルトで最初のオプションになりません

分類Dev

オプション選択に基づいてブーストラップスライダーの値を変更します

分類Dev

別の選択ボックスの選択に基づいて、選択ボックスのオプション値を変更するにはどうすればよいですか?

分類Dev

別の選択オプションに基づいて表示される選択を変更し、同じオプション値を維持します

分類Dev

最初の選択ボックスオプションに基づいて2番目の選択ボックスオプションを更新します

分類Dev

選択した他のオプションボックスに応じて、選択ボックスの値を変更します

分類Dev

各オプションの値またはIDに基づいて選択ボックスをフィルタリングします

分類Dev

選択したチェックボックスの値に基づいてドロップダウンリストオプションを取得する

分類Dev

入力の値に基づいてオプションを選択します

分類Dev

選択したオプションに基づいて入力の値を変更しますが、複数のセットの場合

分類Dev

Angularjsのボタンクリックに基づいて選択オプションを削除します

分類Dev

選択オプションの値に基づいてチェックボックスをオンにするJavascript関数

分類Dev

オプションボタンの選択に基づいてVBAがテキストボックスの値を更新する

分類Dev

他の「選択」ボックスで選択したオプションに基づいて「選択」ボックスのドロップダウン値を設定する方法

分類Dev

オブジェクトをループし、オプションの選択に基づいて値をリストに表示します

分類Dev

Jquery:テキストボックスのテキストに基づいてドロップダウンのオプションを選択します

分類Dev

選択ボックスを非表示にし、選択に基づいてボックスオプションを選択します

分類Dev

入力のすべての値に基づいてオプションを選択します

分類Dev

選択したドロップダウンオプションに基づいて、テキストの長さを2つの値のいずれかに変更します

分類Dev

JavaScript-選択オプションの性別選択に基づいて入力テキスト値を変更する方法

分類Dev

反応-オプションに基づいてsingleValueの色を変更するを選択します

分類Dev

選択したオプションに基づいて値を変更するには?

Related 関連記事

  1. 1

    選択ボックスのオプション値に基づいてビデオのsrc値を変更する方法

  2. 2

    追加された選択ボックスの入力ボックスの値に基づいてオプションボックスを選択します

  3. 3

    反応中の別の選択ボックスの値に基づいて、選択ボックスのオプションを動的にロードします

  4. 4

    選択オプションの値に基づいてテキストボックスの値を動的に変更する

  5. 5

    入力ボックスの数値に基づいて選択ボックスオプションを選択します

  6. 6

    変数の出力に基づいて選択ボックスオプションを変更する

  7. 7

    選択オプションの値に基づいてajaxURLを変更する

  8. 8

    別の選択ボックスの値に基づいて選択ボックスのオプションを動的にロードしますが、依存選択はデフォルトで最初のオプションになりません

  9. 9

    オプション選択に基づいてブーストラップスライダーの値を変更します

  10. 10

    別の選択ボックスの選択に基づいて、選択ボックスのオプション値を変更するにはどうすればよいですか?

  11. 11

    別の選択オプションに基づいて表示される選択を変更し、同じオプション値を維持します

  12. 12

    最初の選択ボックスオプションに基づいて2番目の選択ボックスオプションを更新します

  13. 13

    選択した他のオプションボックスに応じて、選択ボックスの値を変更します

  14. 14

    各オプションの値またはIDに基づいて選択ボックスをフィルタリングします

  15. 15

    選択したチェックボックスの値に基づいてドロップダウンリストオプションを取得する

  16. 16

    入力の値に基づいてオプションを選択します

  17. 17

    選択したオプションに基づいて入力の値を変更しますが、複数のセットの場合

  18. 18

    Angularjsのボタンクリックに基づいて選択オプションを削除します

  19. 19

    選択オプションの値に基づいてチェックボックスをオンにするJavascript関数

  20. 20

    オプションボタンの選択に基づいてVBAがテキストボックスの値を更新する

  21. 21

    他の「選択」ボックスで選択したオプションに基づいて「選択」ボックスのドロップダウン値を設定する方法

  22. 22

    オブジェクトをループし、オプションの選択に基づいて値をリストに表示します

  23. 23

    Jquery:テキストボックスのテキストに基づいてドロップダウンのオプションを選択します

  24. 24

    選択ボックスを非表示にし、選択に基づいてボックスオプションを選択します

  25. 25

    入力のすべての値に基づいてオプションを選択します

  26. 26

    選択したドロップダウンオプションに基づいて、テキストの長さを2つの値のいずれかに変更します

  27. 27

    JavaScript-選択オプションの性別選択に基づいて入力テキスト値を変更する方法

  28. 28

    反応-オプションに基づいてsingleValueの色を変更するを選択します

  29. 29

    選択したオプションに基づいて値を変更するには?

ホットタグ

アーカイブ