特定のセレクタを取得してボタンを表示／非表示したいです。

Question

###前提・実現したいこと
特定のセレクトボックスを開いた時にJavaScript（jQuery）でボタンを表示させるようにしたいです。
表示させたいボタンがあるのですが、最初は消しておき、特定のタブを選択された際に同時にボタンが表示されるようにしたいです。
また、表示させる以外のセレクトボックスを選択した際には最初のようにボタンを非表示にさせておきたいです。

言葉足らずな部分もあるかと思いますが、知恵をお借りできたらと存じます。
何卒よろしくお願いいたします。

###該当のソースコード

<select id="extraction" name="sport">
<option value="aaa">野球</option>
<option value="bbb">サッカー</option>
<option value="ccc">バスケット</option>
</select>

<img id="baseball" src="ball.png">

#baseball{
display:none;
}

$("#extraction").change(function() {
	var extraction_val = $("#extraction").val();
	if(extraction_val == "aaa") {
		$('#baseball').css('display', 'block');
	}else if(extraction_val == "bbb") {
		$('#baseball').css('display', 'none');
	}else if(extraction_val == "ccc") {
$('#baseball').css('display', 'none');
	}
});

###試したこと
下記サイト様など参考に自分なりにコードを置き換えてみましたが、
一向に上手くいかず、どこが悪いのか何をすれば良いのかわからなくなってしまい。。
http://humo-life.sakura.ne.jp/humo/sample/jquery_chang_select.html
http://www.web-officer.com/jquery/how-to-switch-between-display-and-non-display-by-the-selected-value-of-the-select-tag-in-jquery.html

###補足情報
最初にタブと記載しておりましたが、セレクトボックスの誤りでした。
また、こういうふうにしたいと思う、サイトが有りましたので記載させていただきます。
https://campaign.triplesun.co.jp/coloruv_500ts_ad_sp
※スマホ用です

こちらのページ下部にある、お支払い方法のセレクタでAmazonpayを選択した際にAmazonボタンが出るのですが、
ほぼおなじことをしたいです。
よろしくお願い致します。

Comments

[kei344]

「タブ」が書かれていません。その実装部分も含めて質問文に追記してください。

[mr-hisa-child]

上記のソースで試しましたが、動きました。https://jsfiddle.net/7bx4vkj0/　エラーなどは出ていませんか？

[tantalus]

h.ono様　ご連絡ありがとうございます。お送りいただいたものみると動いていますね。。。私のはエラーなどはでていないのですが、今一度確認してみます！どうもありがとうございます！！

Answer 1

このようなこと、と言っているところでも同様に、selectの変更をとらえてdivのスタイルを変更しています。

$('select#form-payment-method').change(function() {
  var $select = $('select#form-payment-method');
  var val = $select.val(),
    $amazon_payments = $('#form_payment_method_amazon_payments');
  if (val == 'amazon_payments') {
    $amazon_payments.css('display', 'block');
  }
}
```(不要部分割愛)

提示されたコードも(imgがdisplay:blockでいいのかという点はおいておいて)動いているようですが、どうでしょうか？

Answer 2

var extraction_val = $("#extraction").val(); ←ちょっと試してみたら、ここで値取れてないっぽいです。
自分の元で、で中身見てみてください

let extraction_val = $("#extraction").val();
console.log(extraction_val);

もし、値が何も入ってなかったら

var extraction_val = $("#extraction").val();
var extraction_val = this.value; //これに変えたら動くかもしれないです

とかやればうごくかもしれないです。

Comments

[tantalus]

drizzing20様
ご連絡いただきましてありがとうございます。
ご教示頂きました内容で一度トライしてみたいと思います。

[drizzing20]

http://blog.skyld.org/2009/06/jquery-ready.php

jqueryが読み込めてるのかも確認お願いします！

[tantalus]

drizzing20様
ご連絡ありがとうございます。
jqueryはしっかりと読み込めていました！

追記でも記載させていただいていたのですが、下記サイト（スマホサイト）とほぼ同じことをしたいと思っております。
https://campaign.triplesun.co.jp/coloruv_500ts_ad_sp

こちらのサイトのページ下部の支払いセレクタでAmazonpayを選択した時のみボタンを表示させるには私の記載したソースでは根本から誤っているのですかね？

直接的にこのような事をお伝えしまして、大変申し訳ありません。
お忙しい中恐れ入りますが、お知恵をお借り出来ましたら幸いです。
何卒よろしくお願い致します。

[tantalus]

drizzing20様
お世話になります。
度々申し訳ございません。

先程もう一度ご教示いただきました内容をトライしてみたら実装できました！
未熟な私の質問にお答え頂きまして誠にありがとうございます。

今後もご質問、当サイトでさせていただきました際はご助力いただけましたら幸いです。
本当にありがとうございました。

[drizzing20]

解決したなら何よりです！
`一向に上手くいかず、どこが悪いのか何をすれば良いのかわからなくなってしまい`
もし分からなくなったら焦らず、自分が定義した変数、関数の中身をconsole.logとかで確認してみると間違いが分かるかもしれません！

変数の中身はあってるのにエラーがでたら（）エラーの内容次第でもありますが、 typeofとか使って型が意図したものになっているか確認してみると良いです！

[tantalus]

ご丁寧にご対応いただきまして誠にありがとうございます！
今後ご教示頂きましたことを意識しながら制作していきたいと思います！！