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

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

ただいまの
回答率

90.52%

  • 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版です。

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

解決済

回答 3

投稿

  • 評価
  • クリップ 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();
});

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

checkベストアンサー

+2

こんにちは。

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

// ① 中プルダウン: 全て、右プルダウン: 全て
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で質問しよう!

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

関連した質問

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

  • 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版です。