jQuery load（）のヘルプが必要

Question

私はドロップダウンセレクタを持っており、選択に基づいてフォームの他の部分をロードする必要があります。ここで私はこれまで持っているものです：

$('#mySelector').change(function(){ 
    var $selectForm = '#' + $(this).val(); 
    $('#fLoad').load('formParts.html ' + $selectForm); 
}); 

<select id="mySelector"> 
    <option value="o1">Car details 
    <option value="o2">Boat details 
    <option value="o3">Train details 
</select> 

私は、フォームの部分を格納し、外部HTML にformParts.htmlは

<div id="o1"> 
    <label for="f1_1">Car speed</label> 
    <input id="f1_1" type="text"> 
    <br> 
    <label for="f1_2">Car color</label> 
    <input id="f1_2" type="text"> 
</div> 

<div id="o2"> 
    <label for="f2_1">Boat size</label> 
    <input id="f2_1" type="text"> 
    <br> 
    <label for="f2_2">Boat weight</label> 
    <input id="f2_2" type="text"> 
</div> 

<div id="o3"> 
    <label for="f3_1">Train length</label> 
    <input id="f3_1" type="text"> 
    <br> 
    <label for="f3_2">Train cargo</label> 
    <input id="f3_2" type="text"> 
</div> 

関係なく、一部だけ最初のdivをロードするように見えます私の選択の。私は何が欠けていますか？ここで

Answer 1

は動作するコードです：あなたのHTMLタグがうまく形成されていなかった。 あなたのオプションタグがうまくformParts.html

<select id="mySelector"> 
     <option value="0">Select</option> 
     <option value="o1">Car details</option> 
     <option value="o2">Boat details</option> 
     <option value="o3">Train details</option> 
    </select> 

を形成しませんでした。

<div id="o1"> 
     <label for="f1_1">Car speed</label> 
     <input id="f1_1" type="text" /> 
     <br /> 
     <label for="f1_2">Car color</label> 
     <input id="f1_2" type="text" /> 
    </div> 

    <div id="o2"> 
     <label for="f2_1">Boat size</label> 
     <input id="f2_1" type="text" /> 
     <br /> 
     <label for="f2_2">Boat weight</label> 
     <input id="f2_2" type="text" /> 
    </div> 

    <div id="o3"> 
     <label for="f3_1">Train length</label> 
     <input id="f3_1" type="text" /> 
     <br /> 
     <label for="f3_2">Train cargo</label> 
     <input id="f3_2" type="text" /> 
    </div>