選択したドロップダウン

選択に応じてドロップダウンリストのオプションを変更する必要があります。選択したドロップダウンリストを使用したいと思います。選択したドロップダウン

https://harvesthq.github.io/chosen/

私はバイオリンを作って、それが正常に動作します。

問題は、私はそれが私のプロジェクトで動作させることができないということです。私は正しい場所に正しいものを含めるのではないかと恐れています。

これはどのように、どこに私が含まれているかです。私はそれに気づいてきたヘッド

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="../Libs/chosen_v1.6.2/chosen.jquery.js" type="text/javascript"></script> 
<script src="../Libs/chosen_v1.6.2/docsupport/prism.js" type="text/javascript" charset="utf-8"></script> 
//HTML code that describes my elements 
//JS code in a script tag with jquery

前にどこか

<link rel="stylesheet" href="../Libs/chosen_v1.6.2/docsupport/prism.css"> 
<link rel="stylesheet" href="../Libs/chosen_v1.6.2/chosen.css">

：

私は$(document).ready
- それがエラーを与える：Uncaught TypeError: $(...).chosen is not a function
それは誤りがない外
- $(document).readyだ場合は、ドロップダウンフィールドは、選択されたドロップダウンのように見えますが、それはに応じて内容を変更しません。選択。
それは外$(document).readyだと私は$(".chosen_class").chosen({ width:"90%"})
- を削除した場合、それは内容を変更したが、もちろん、それは選ばれたドロップダウン

アップデートのようには見えません。 JSクラスから起動されるポップアップのドロップダウンが必要です。多くのコードがありますが、ここでは関連するコードを示します。

MyClass.prototype.showPopUp= function(){ 
    document.getElementById('my_div').style.display = "block"; 
} 
<div id="my_div" style = "display:none;"> 
    <form> 
     <select id="select1" > 
      <option value=""></option> 
      <option value="A">A</option> 
      <option value="B">B</option> 
      <option value="C">C</option> 
     </select> 
     <select id="select2" class="chosen_class" data-placeholder="Select here" multiple> 
     </select> 
    </form> 
</div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    $(".chosen_class").chosen({ 
     width:"90%" 
    }); 
    $("#select1").change(function() { 
     var letter = $(this).val(); 
     $('#select2').empty(); 
     if (letter == "A") { 
      $('#select2') 
       .append("<option value='letter A'>letter A</option>") 
       .trigger("chosen:updated"); 
     } else if (letter == "B") { 
      $('#select2') 
       .append("<option value='letter B'>letter B</option>") 
       .trigger("chosen:updated"); 
     } else if (letter == "C") { 
      $('#select2') 
       .append("<option value='letter C'>letter C</option>") 
       .trigger("chosen:updated"); 
     } 
    }); 
});

すべてがmyFileにあります。PHP は、私はこのような私のプロジェクトでは、このファイルを含める：

  <?php require_once(ROOTPATH."/myFile.php"); ?> 
    </body> 
</html>

出典

2016-12-19 Newbie

jqueryライブラリの "Somewhere before head"への参照を追加すると書いたとき、どういう意味ですか？それは、身体セクションの終わりの直前（より前の行）の頭部の一部であるか、またはそれより優れたものでなければなりません。 – codemonkey65

私が言ったことはすべて、 "頭の前のどこか"と言いました。別のファイルで書かれており、 "require_once"に含まれています。が始まります。だから、あなたは私がボディセクションの最後にすべての図書館を置くべきだと言う。 HTMLコードはどこに含めるべきですか？それは順序が重要ですか：HTMLコード、JSコード？ – Newbie

私はこの '<スクリプトSRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> <スクリプトSRC =」を挿入しようとしました。 ./Libs/chosen_v1.6.2/chosen.jquery.js "type =" text/javascript "> ' ボディセクションを閉じる直前です。そして、このエラーを出します：Uncaught TypeError：$（...）。関数が選択されていません。 – Newbie

あなたは何をすべき：から

<!DOCTYPE html> 
<html> 
<head> 
    <title>Your page title</title> 
    <!-- Your chosen.css file --> 
</head> 
<body> 
    <!-- Your HTML and select element to be affected here --> 


    <!-- jQuery library declaration here; 
    please note: this should come before your chosen JavaScript files. 
    The order is very important --> 
    <!-- Your chosen JavaScript files here --> 
    <!-- Then, initialise chosen here so as to affect your desired element --> 
</body> 
</html>

要約すると、必要な順序で、コードを使用してjsfiddleを共有し、考慮して取って自分のテンプレート作成中の最終更新。

ここでは、メインファイルの名前はindex.phpで、実際のコードを格納するファイル名はmyFile.phpというマイディレクトリと同じです。

<div id="my_div" style = "display:none;"> 
    <form> 
     <select id="select1" > 
      <option value=""></option> 
      <option value="A">A</option> 
      <option value="B">B</option> 
      <option value="C">C</option> 
     </select> 
     <select id="select2" class="chosen_class" data-placeholder="Select here" multiple> 
     </select> 
    </form> 
</div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script> 
<script> 
    $(document).ready(function() { 
     // All manipulation begins here. 
     MyClass.prototype.showPopUp= function(){ 
      document.getElementById('my_div').style.display = "block"; 
     }; 

     $(".chosen_class").chosen({ 
      width:"90%" 
     }); 
     $("#select1").change(function() { 
      var letter = $(this).val(); 
      $('#select2').empty(); 
      if (letter == "A") { 
       $('#select2') 
        .append("<option value='letter A'>letter A</option>") 
        .trigger("chosen:updated"); 
      } else if (letter == "B") { 
       $('#select2') 
        .append("<option value='letter B'>letter B</option>") 
        .trigger("chosen:updated"); 
      } else if (letter == "C") { 
       $('#select2') 
        .append("<option value='letter C'>letter C</option>") 
        .trigger("chosen:updated"); 
      } 
     }); 
    }); 
</script>

は覚えている：あなたのmyFile.phpファイルの

<!DOCTYPE html> 
<html> 
<head> 
    <title>Your page title</title> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css"> 
</head> 
<body> 

<?php require_once("myFile.php"); ?> 
</body> 
</html>

コンテンツ：あなたのindex.phpファイルの

内容：など、あなたは次のように自分の意図した目的を達成することができますするために上記の図の目的のために、index.phpとmyFile.phpは、選択したディレクトリ内の同じレベルにあります。

出典

2016-12-19 14:21:45 nyedidikeke

私はあなたのガイドラインを尊重し、結果は選択されたドロップダウンのように見えますが、select1のようにオプションを更新しません。 bodyタグの最後の前に自分のコードを挿入しました（HTML、jqueryライブラリ、選択したJSファイル、JSコード、選択を初期化しました）。 '$（document）.ready'の中で選択されたものを初期化するのが間違っている理由はありますか？ – Newbie

私のお勧めに続いて、あなたの共有jsfiddleのイラストで私の答えを更新しました。それをテストするために単純にコピー＆ペーストすることができます。 – nyedidikeke

@Newbie：あなたのプロジェクトで今働いてくれることを願っています！そうでない場合、あなたはどんな挑戦に直面していますか – nyedidikeke

選択したドロップダウン

答えて

関連する問題