使用jquery仅显示在表单中选择的当前选项

时间:2013-05-07 16:39:41

标签: javascript jquery

我对jquery很新。

这是我的代码

<script>
$(document).ready(function(){
    $('#bashing_title').change(function(){
        if($(this).val() == 1)
        $('#1').show();
        else if($(this).val() == 2)
        $('#2').show();
        else if($(this).val() == 3)
        $('#3').show();
        else if($(this).val() == 4)
        $('#4').show();
        else if($(this).val() == 5)
        $('#5').show();
        else if($(this).val() == 6)
        $('#6').show();
        else if($(this).val() == 7)
        $('#7').show();
        else if($(this).val() == 8)
        $('#8').show();
        else if($(this).val() == 9)
        $('#9').show();

        else
        $('#1').hide();
    });
});

</script>

我想要做的是,如果值是1,它会显示一个特定的文本框,如果是2则是另一个,依此类推。但是,如果用户首先选择了值为1的选项,并且如果用户稍后选择了2,那么这个选项就不会被隐藏。

如何隐藏上一个值并仅显示当前选择的值

2 个答案:

答案 0 :(得分:5)

为您的所有输入提供一个类,您可以将代码缩短为以下内容(示例类名称为:selectInput

$('#bashing_title').change(function(){
    $(".selectInput").hide();
    $("#"+this.value).show();
});

输入的HTML(遵循此样式)

<input type="text" id="1" class="selectInput"/>

答案 1 :(得分:0)

我认为这应该适合你。

$('#bashing_title').change(function(){
    var selectvalue = $('#bashing_title').find(":selected").val();
    $('#'+selectvalue).show();
    });