Jqueryのバージョンアップでプルダウンメニューが動作しなくなってしまいました

Question

Jqueryのバージョンアップでプルダウンメニューが動作しなくなってしまいました

解決済

回答 3

投稿 2017/02/14 21:46

評価
クリップ 0
VIEW 573

ryuuta

score 5

ページ内にプルダウンメニューが3つ設置されており、
1つ目はページ切り替えのためのメニュー（左）で、
2つ目3つ目（中央、右）がページ内のリストをソートするメニューになっています。
こちらの左のページ切り替えは問題なく動作しているのですが、
中央、右のリストをソートするプルダウンメニューが、
Jqueryのバージョンを1.7.0から1.9.1にバージョンアップしたところ、
動作しなくなってしまいました。
こちらどこが原因かご教示いただけますでしょうか。
なおJqueryのバージョンを下げることは、他の箇所との兼ね合いでできません。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
    var str = "";
    var str2 = "";
    $('p#noresult').hide();
    $("select#type").change(function () {
        $('p#noresult').hide();
        $('#feedList dt').hide();
        $('#feedList dd').hide();
        str = "." + $('select#type option:selected').val();
        str2 = "." + $('select#test option:selected').val();
        var num = "";
            if(str == "." && str2 == "."){
                $('#feedList dt').show();
                $('#feedList dd').show();
            }
            else if(str == "."){
                $('#feedList dt' + str2).show();
                $('#feedList dd' + str2).show();
            }
            else
            {
                $('#feedList dt' + str + str2).show();
                $('#feedList dd' + str + str2).show();
            }
        num = $('#feedList dt:visible').length;
        if(num == 0){
            $('p#noresult').show();
        }
    });
    $("select#test").change(function () {
        $('p#noresult').hide();
        $('#feedList dt').hide();
        $('#feedList dd').hide();
        str = "." + $('select#type option:selected').val();
        str2 = "." + $('select#test option:selected').val();
        var num2 = ""; 
            if(str == "." && str2 == "."){
                $('#feedList dt').show();
                $('#feedList dd').show();
            }
            else if(str2 == "."){
                $('#feedList dt' + str).show();
                $('#feedList dd' + str).show();
            }
            else
            {
                $("#feedList dt" + str + str2).show();
                $("#feedList dd" + str + str2).show();
            }
        num2 = $("#feedList dt:visible").length;
        if(num2 == 0){
            $('p#noresult').show();
        }
    });
});
</script>

<!DOCTYPE html>
<html lang="ja">
<head>
<title></title>
</head>
<body>
<main>
<div id="section_filter">
<select name="year" id="year" onchange="document.location.href=this.options[this.selectedIndex].value;">
<option value="2017.html">2017</option>
<option value="2016.htm">2016</option>
<option value="2015.htm">2015</option>
<option value="2014.htm">2014</option>
</select>

<select name="ct" id="type">
<option value="">全て</option>
<option value="typeA">タイプA</option>
<option value="typeB">タイプB</option>
<option value="typeC">タイプC</option>
</select>

<select name="cp" id="test">
<option value="">全て</option>
<option value="testA">テストA</option>
<option value="testB">テストB</option>
<option value="testC">テストC</option>
</select>
</div>

<p id="noresult">該当する記事は見つかりませんでした。</p>
<script type="text/javascript">
$(function(){
    var this_url = document.URL;
    $('select#year').val(this_url);
});
</script>
<section>
<dl id="feedList">
<dt class="typeA testA">xx年xx月xx日</dt><dd class="typeA testA"><a href="">タイプA＆テストA</a></dd>
<dt class="typeA testB">xx年xx月xx日</dt><dd class="typeA testB"><a href="">タイプA＆テストB</a></dd>
<dt class="typeA testC">xx年xx月xx日</dt><dd class="typeA testC"><a href="">タイプA＆テストC</a></dd>
<dt class="typeB testA">xx年xx月xx日</dt><dd class="typeB testA"><a href="">タイプB＆テストA</a></dd>
<dt class="typeB testB">xx年xx月xx日</dt><dd class="typeB testB"><a href="">タイプB＆テストB</a></dd>
<dt class="typeB testC">xx年xx月xx日</dt><dd class="typeB testC"><a href="">タイプB＆テストC</a></dd>
<dt class="typeA testA">xx年xx月xx日</dt><dd class="typeA testA"><a href="">タイプA＆テストA</a></dd>
<dt class="typeA testB">xx年xx月xx日</dt><dd class="typeA testB"><a href="">タイプA＆テストB</a></dd>
<dt class="typeA testC">xx年xx月xx日</dt><dd class="typeA testC"><a href="">タイプA＆テストC</a></dd>
<dt class="typeB testA">xx年xx月xx日</dt><dd class="typeB testA"><a href="">タイプB＆テストA</a></dd>
<dt class="typeB testB">xx年xx月xx日</dt><dd class="typeB testB"><a href="">タイプB＆テストB</a></dd>
<dt class="typeB testC">xx年xx月xx日</dt><dd class="typeB testC"><a href="">タイプB＆テストC</a></dd>
</dl>
</section>
</main>
</body>
</html>
コード

HTML、CSSはそこそこわかるのですが、
JSに関しては初心者のため、簡単にわかるご説明をご教示いただければ幸いです。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

回答 3 件

評価が高い順
新着順
古い順

+3

いちおうサンプル

$(function(){
  $('select#type,select#test').on('change',function () {
    var val1=$('select#type').val();
    var val2=$('select#test').val();
    var selector="";
    if(val1!=="") selector+="."+val1;
    if(val2!=="") selector+="."+val2;
    if(selector=="") selector="*";
    $('#feedList dt,#feedList dd').filter(selector).show();
    $('#feedList dt,#feedList dd').not(selector).hide();
    var len=$('#feedList dt').filter(selector).length;
    $('#noresult').toggle(len==0);
  }).change();
});

投稿 2017/02/14 22:53

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

noConflict()というメソッドを利用して、Jquery2つを共存させてみてはどうでしょうか？
http://webnonotes.com/javascript-2/jquery-noconflict/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>


<script type="text/javascript">    
    var $170 = $.noConflict(true);

    (function($){

//ver1.9.1の内容を記入
console.info("ver = " + $.fn.jquery);//確認用
    })(jQuery);

    (function($){
        $(function(){

//ver1.7.0の内容を記入
$(function(){
    var str = "";
    var str2 = "";
    $('p#noresult').hide();

//console.info("ver = " + $.fn.jquery);//確認用
    $("select#type").change(function () {
        $('p#noresult').hide();
        $('#feedList dt').hide();
        $('#feedList dd').hide();
        str = "." + $('select#type option:selected').val();
        str2 = "." + $('select#test option:selected').val();
        var num = "";
            if(str == "." && str2 == "."){
                $('#feedList dt').show();
                $('#feedList dd').show();
            }
            else if(str == "."){
                $('#feedList dt' + str2).show();
                $('#feedList dd' + str2).show();
            }
            else
            {
                $('#feedList dt' + str + str2).show();
                $('#feedList dd' + str + str2).show();
            }
        num = $('#feedList dt:visible').length;
        if(num == 0){
            $('p#noresult').show();
        }
    });
    $("select#test").change(function () {
        $('p#noresult').hide();
        $('#feedList dt').hide();
        $('#feedList dd').hide();
        str = "." + $('select#type option:selected').val();
        str2 = "." + $('select#test option:selected').val();
        var num2 = ""; 
            if(str == "." && str2 == "."){
                $('#feedList dt').show();
                $('#feedList dd').show();
            }
            else if(str2 == "."){
                $('#feedList dt' + str).show();
                $('#feedList dd' + str).show();
            }
            else
            {
                $("#feedList dt" + str + str2).show();
                $("#feedList dd" + str + str2).show();
            }
        num2 = $("#feedList dt:visible").length;
        if(num2 == 0){
            $('p#noresult').show();
        }
    });
});



        });
    })($170);
</script>

投稿 2017/02/14 22:32

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

同じタグがついた質問を見る

JavaScript

16376questions

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
jQuery

6690questions

jQueryは、JavaScriptライブラリのひとつです。簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
HTML5

4006questions

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

score 2 · Accepted Answer · 2017-02-14T22:26

ベストアンサー

+2

こんにちは。

まず、バージョン関係なくですが、
中･右プルダウン２つの表示・非表示に対して、
分岐のパターンは４つが正しいのではないでしょうか。

// ① 中プルダウン: 全て、右プルダウン: 全て
if(str == "." && str2 == "."){
    $('#feedList dt').show();
    $('#feedList dd').show();
}
// ② 中プルダウン: 全て、右プルダウン: テストA, B, ...
else if(str == "."){
    $('#feedList dt' + str2).show();
    $('#feedList dd' + str2).show();
}
/* ↓ここが必要？
// ③ 中プルダウン: タイプA, B, ...、右プルダウン: 全て
else if(str2 == "."){
    $('#feedList dt' + str).show();
    $('#feedList dd' + str).show();
}
*/
// ④ 中プルダウン: タイプA, B, ...、右プルダウン: テストA, B, ...
else
{
    $('#feedList dt' + str + str2).show();
    $('#feedList dd' + str + str2).show();
}

③の分岐がないため「中プルダウン: タイプA, B, ...、右プルダウン: 全て」のケースが④の分岐に流れています。
その結果、例えば「$('#feedList dt.typeA.')」を呼ぶ時にエラーとなります。

1.7.0のバージョンでは「$('#feedList dt.typeA.')」が許容（#feedList dt.typeA.[任意]の要素）されていましたが、
1.9.1のバージョンでは「$('#feedList dt.typeA.')」がエラーになるみたいですね。

投稿 2017/02/14 22:26

編集 2017/02/14 22:36

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2017/02/14 22:37

ご回答ありがとうございます！
ご教示いただいた通り試したところ、問題なく動作しました。
助かりました！
心よりに感謝いたします！

ご回答ありがとうございます！ご教示いただいた通り試したところ、問題なく動作しました。助かりました！心よりに感謝いたします！

キャンセル
2017/02/14 22:53

補足です。
私の回答は「$("select#type").change」内のみ言及していますが、
｢$("select#test").change」内についても同様です。
｢$("select#test").change」内の方はエラーにはなりませんが、
付けておいた方が良いと思います。
$("select#test")の方がエラーにならないのは、
$("#feedList dt..testA")が許容されているからです。
では頑張ってください！

補足です。私の回答は「$("select#type").change」内のみ言及していますが、｢$("select#test").change」内についても同様です。｢$("select#test").change」内の方はエラーにはなりませんが、付けておいた方が良いと思います。 $("select#test")の方がエラーにならないのは、 $("#feedList dt..testA")が許容されているからです。では頑張ってください！

キャンセル

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Jqueryのバージョンアップでプルダウンメニューが動作しなくなってしまいました

関連した質問

同じタグがついた質問を見る

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Jqueryのバージョンアップでプルダウンメニューが動作しなくなってしまいました

15分調べてもわからないことは、teratailで質問しよう！

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン