Question

我在下面有一个下拉选择器和表单字段。我需要能够根据所选选项显示表单标签和相应的表单字段。

实现此目的的最佳方法是：准备可能的标签和字段以及表单元素并将它们存储在隐藏的div中，然后根据选择显示/隐藏？

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

<select id="mySelector">
   <option value="o1">Car 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>

我认为jQuery是最好的方式......

另外，我会显示3次，每次选项一次。我需要某种机械师来防止选择上面选择的相同选项。有可能吗？

Answer 1

如果这些元素的“重量”很轻，那么将它们放在页面中并动态切换哪个是可见的并不是一个坏主意。否则，您可能应该通过ajax获取内容。

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

我可能会添加一个类（可能是每个div的'info'）。这样你可以使用

.info {display: none; }

最初隐藏元素和

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

如果你需要使用ajax，你可能需要一个占位符div ...

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

并使用

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

动态获取html。

希望这能让你开始。

鲍勃

使用jQuery根据选择更新标签

1 个答案: