ドロップダウン選択に基づいてデータベースからの関連データを表示JavaScript

Question

私の仕事では、ドロップダウンから1つの名前を選択したいと思います。次に、その名前に関連する技術を他のdivタグに印刷したいと思います。私はこれをする方法を知らない。私は正常にドロップダウンオプションのデータベースからデータを取得します。ここに私のコードです。

candidate name: 
<select name="candidate_id" class="form-control" id="can_name" value="<?php echo set_value('candidate_id');?>"palceholder="candidate full name" required> 
    <option></option> 
    <?php foreach ($candidate as $r): ?> 
     <option value="<?php echo $r->candidate_id; ?>"><?php echo $r->candidate_name." "; ?></option> 
    <?php endforeach; ?> 
</select> 
</select> 

<div class="error"><?php echo form_error("candidate_name");?></div><br> 
<div></div><br> <!-- here I want to print technology related to canididate name --> 

Answer 1

jQueryライブラリを使用しましょう。これにより、あなたがしたいことの構文が簡単になります。

あなたはこのようなあなたのページにそれを含める：これは、ライブラリの1.xのブランチの最新バージョン縮小さで引っ張ってくる

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

。

次に選択が必要です。私は言いたいことは、以下の例を使ってみましょう。

は、それが正しくない場合、あなたはそれを変更することができ、のがとにかく選択を使用してみましょう：それと

<label for="meetingPlace">Meeting place: </label> 
    <select id="meetingPlace"> 
    <option>Please select</option> 
    <option>Buckingham Palace</option> 
    <option>The White House</option> 
    <option>Mount Everest</option> 
</select> 

場所で使用すると、変更イベントの選択のにフックする必要があります。 あなたはJavaScriptでこれを行うことができます。このすべてがする

$("#meetingPlace").on("change", function(){ 
// This code will fire every time the user selects something 
}) 

は「#meetingPlace」のidを持つ要素を選択して、ユーザーが別の何かを選択するたびに実行する必要があり、無名関数を宣言しています。

この投稿の最終ステップとして、ユーザーがページで選択した内容をJS出力にしましょう。これは何

var selected = $(this).val(); 
$("#results").html("You selected: " + selected); 

が選択されたオプションの値を割り当てるです：

<div id="results"></div> 

はその後のonchangeコールバックの中に次のコードを追加します。

「結果」のidを持つdiv要素を作成します。要素を変数に追加し、それに応じて結果のinnerHTMLを設定します。