Question

我有表单字段，单击按钮时使用Jquery显示。

[select dropdown: conOperator]   [textfield: conValue ]  [select dropdown: conValuedd]

默认隐藏conValuedd。

我正试图找出一种方法，这样当我在第一个选择下拉[conOperator]中选择Apple或Banana时，它会隐藏文本字段conValue并显示下拉conValuedd。但是，如果我选择西瓜，它将显示conValue并再次隐藏conValuedd。任何想法都会非常感激。

$('<select id="conOperator' + num + '" name="conOperator' + num + '" class="standard_select" style="width:147px;">
    <option>Watermelon</option>
    <option>Apple</option>
    <option>Banana</option>
   </select>&nbsp;
   <input type="text" id="conValue' + num + '" name="conValue' + num + '" class="short_input" value="" style="width:147px;">&nbsp;&nbsp;
   <select style="display:none" id="conValuedd' + num +'" multiple="multiple" size="5">
    <option value="option1">Blah</option>
    <option value="option2">Blah</option>
   </select>').appendTo('#addCondition');

Answer 1

尝试类似：

$('#addCondition').on('change','#conOperator' + num, function(e){        
    switch( $('option:checked',this).text() ){
        case 'Apple':
        case 'Banana':
            $(this).nextAll(':text:first').hide();
            $(this).nextAll('select:first').show();
            break;
        case 'Watermelon':
            $(this).nextAll(':text:first').show();
            $(this).nextAll('select:first').hide();
            break;
    }
});
$('#conOperator' + num).trigger('change');

DEMO

Answer 2

当您调用appendTo()时，生成的<select/>将添加到DOM中，以便您可以使用jQuery检索它并在其上添加一个侦听器。

$("#conOperator" + num).change(function() {
    // Your logic here
}

使用Jquery在javascript创建的标记内调用javascript函数

2 个答案: