我需要创建一个包含许多选择标签的表单,在每个选择标签中都会打开另一个选择,在这个选择中选择另一个和另一个,另一个和另一个,直到表单结束。
我现在有这个 http://jsfiddle.net/8SZ5n/1/,但它不是通用的,我需要在每个选择中调用这个函数。
<script type="text/javascript">
$(function() {
$('.select').change(function(){
if ($(this).val() == "1") {
$('.divR1').show();
$('.divR2').hide();
}else if($(this).val() == "2"){
$('.divR2').show();
$('.divR1').hide();
}
else {
$('.divR1').hide();
$('.divR2').hide();
}
});
});
</script>
<div id="div1">
<select class="select" autocomplete="off">
<option value="#" checked>Escolha</option>
<option value="1">Sim</option>
<option value="2">Não</option>
</select>
<div class="divR1" style="display:none">
1
<select autocomplete="off">
<option value="#" checked>Escolha</option>
<option value="1">Sim</option>
<option value="2">Não</option>
</select>
</div>
<div class="divR2" style="display:none">
2
<select autocomplete="off">
<option value="#" checked>Escolha</option>
<option value="1"></option>
<option value="2"></option>
</select>
</div>
</div>
http://jsfiddle.net/8SZ5n/5/
$(function () {
$(".select").change(function () {
var next = $('option', this).filter(':selected').attr('next');
$($(this).attr('hide')).hide();
if (next != undefined) {
$(next).show();
}
});
});
好吧,您没有明确定义表单的结尾,因此,这里有一个例子,它一直持续到您希望它:)
JSFiddle
$(function () {
$('select').change(handler);
});
function handler() {
var x = $(this);
if (x.val() != '#') {
var div = $('<div>').append(x.val());
x.parent().append(div);
var select = $('<select>')
.attr('autocomplete', 'off')
.change(handler)
.append($('<option>').attr('value', '#').append('Escolha'))
.append($('<option>').attr('value', '1').append('Sim'))
.append($('<option>').attr('value', '2').append('Não'));
div.append(select);
} else {
x.siblings().remove();
}
}
$( function() {
$( ".select" ).change( function() {
var id = $( this ).val();
$( ".selectDiv" ).hide();
$( ".divR" + id ).show();
});
});
我添加了"selectDiv"类到所有依赖的div;另外,"divR"应该是一个ID蚁而不是一个类,如果它是唯一的;)
编辑 js小提琴