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

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

質問する

ただいまの
回答率

88.11%

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

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,629
ryuuta

score 14

ページ内にプルダウンメニューが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();
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+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:37

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

    キャンセル

  • 2017/02/14 22:53

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

    キャンセル

+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>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 88.11%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

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

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る