Question

我需要在表单中显示一些选项或隐藏它们，具体取决于之前选择的选项。我认为代码很简单，这里是javascript：

$(document).ready(function() {
    $('#A2').hide();
    $('#A3').hide();
    $('#A5').hide();
    $('#A6').hide();
    //A8, A9, A11...

    $('#A1').change(function(){
        if($(this).val() == "1"){
            $('#A2').show();
            $('#A2').focus();
        }
        else $('#A2').hide();
    });
    $('#A2').change(function(){
        if($(this).val() == "1"){
            $('#A3').show();
            $('#A3').focus();
        }
        else $('#A3').hide();
    });
    //the same with A4, A5, A7...
});

以下是html的一部分：

<select name="A1" id="A1">
    <option selected="selected">¿Conoce?</option>
    <option value="1">Sí</option>
    <option value="0">No</option>
</select>
<select name="A2" id="A2">
    <option selected="selected">¿Ha usado?</option>
    <option value="1">Sí</option>
    <option value="0">No</option>
</select>
<select name="A3" id="A3">
    <option selected="selected">¿Nota?</option>
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="99">Ns/Nc</option>
</select>
//the same for A4-A6, A7-A9...

我想要的是创建一个无需大量代码即可完成此操作的函数...我已经测试了下一个js但它不起作用：

$.fn.validar1 = function(elem) {
    if(elem.val() == "1"){
        elem.next('select').show();
        elem.next('select').focus();
    }
    else elem.next('select').hide();
} 

validar1('#A1');

我知道我的代码非常糟糕......我开始使用jQuery，请怜悯：O）

Answer 1

这就是你所需要的，如果你所展示的html和js就是你所拥有的：

$(document).ready(function() {
    $('select').hide();

    $('select').change(function(){
        if($(this).val() == "1"){
            $(this).next().show().focus();
        }
        else $(this).next().hide();
    });
});

如果这不起作用，请制作fiddle

简化显示/隐藏表单字段的jQuery代码

1 个答案: