如果使用jQuery下拉值= X,则显示输入区域

时间:2012-11-21 10:27:38

标签: javascript jquery

如果特定选择值为= X,我正在尝试显示输入字段。

我有一个下拉菜单询问我的用户是否要添加其他与会者,如果他们选择了1/2参加者,我希望相关的下拉菜单出现。

我已经尝试过编写一个函数,但是它无法正常工作,就像你多次更改参与者值一样,你会看到一些输入字段出现而有些消失了?

我添加了一个小提琴,以显示我的意思,任何帮助赞赏!

jQuery

/* Attendee Dropdown */
function attendees() {
    // Function 
    if ($('select[name^="add-attend"]').val() == "1") {     
       $('.attend-1').removeClass('nodisplay');
       $('.attend-1').toggle();         
    }
    else if ($('select[name^="add-attend"]').val() == "2") {     
      $('.attend-1').removeClass('nodisplay');
      $('.attend-2').removeClass('nodisplay');
      $('.attend-1').toggle(); 
      $('.attend-2').toggle();           
    }
    else {     
       $('.attend-1').addClass('nodisplay'); 
       $('.attend-2').addClass('nodisplay');           
    }; 
};
$('.add-attend').change(attendees);

小提琴

http://jsfiddle.net/7LxF8/

3 个答案:

答案 0 :(得分:1)

以下是使用.show() http://jsfiddle.net/7LxF8/1/

的小提琴更新

答案 1 :(得分:1)

$('.add-attend').on('change', function() {
    var elm1 = $('.attend-1'),
        elm2 = $('.attend-2');
    switch (this.value) {
        case '0':
            elm1.add(elm2).hide();
            break;
        case '1':
            elm1.show();
            elm2.hide();
            break;
        case '2':
            elm1.add(elm2).show();
    }
});​

FIDDLE

答案 2 :(得分:0)

您可以选择li元素并使用filter方法。

function attendees() {
    $('li[class^="attend"]')
        .hide()
        .filter('[class=attend-' + this.value + ']')
        .show()
};
$('.add-attend').change(attendees);

http://jsfiddle.net/LPRYr/