update labels based on selection with jQuery

I have a drop-down selector and form fields below. I need to be able to display form labels and corresponding form fields based on selected option.

What is the best way to implement this: prepare possible labels and fields and forms elements and store them in hidden divs and then show/hide based on selection?

<script type="text/javascript">
$(function() {
    $('#mySelector').change(function(){            
         $('.opt').hide();
         $('#' + $(this).val()).toggle();
    });
});
</script>

<select id="mySelector">
   <option value="o1">开发者_StackOverflowCar details
   <option value="o2">Boat details
   <option value="o3">Train details
</select>

<div id="o1" class="opt">
    <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" class="opt">
    <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" class="opt">
    <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>

I assume jQuery is the best way to go...

Also, I will display this 3 times, once for each option. I need some sort of mechanist to prevent selecting the same option that has been selected above. Is it possible?

If the 'weight' of these elements is light then putting them in your page and dynamically toggling which is visible is not a bad idea. Otherwise, you probably should fetch the content via ajax.

$('#o1').show()  // This will display the 'o1' div
$('#o1').hide()  // This will hide the 'o1' div

I would probably add a class (maybe 'info' to each of the divs). That way you can use

.info {display: none; }

to initially hide the elements and

$('.info').hide() // this will hide all the elements.

If you need to use ajax, you probably will need a placeholder div...

<div id='placeholder'></div>

and use

$('#placeholder').load(url)

to dynamically fetch the html.

Hope this gets you started.

Bob