Question

在下拉菜单中选择“其他”选项后，我希望在下拉菜单后显示一个新的输入字段，但不会发生任何事情。

    function empty_recursive($value) {
    if( is_array($value) ) {
        $empty = true;
        array_walk_recursive($value, function($item) use (&$empty) {
            $empty = $empty && empty( $item );
        });
    }
    else {
        $empty = empty( $value );
    }
    return $empty;
}

echo "<h1>WITH empty Array</h1>+++++++++++++++++";
$array1 = array(
    array(
        "bank_name"      => [],
        "bank_code"      => '',
        "branch"         => "",
        "account_number" => "",
        "account_type"   => ""
    )
);
echo empty_recursive($array1) == true ? 'This array is empty' : 'This array is not empty, you may proceed';
echo '---------------------------------------------------------------------------------+';
echo "<br><h1>WITH filled Array</h1>";
$array2 = array(
    array(
        "bank_name"      => "Bank Name",
        "bank_code"      => '12',
        "branch"         => "22",
        "account_number" => "32",
        "account_type"   => "23"
    )
);
echo empty_recursive($array2) == true ? 'This array is empty' : 'This array is not empty, you may proceed';

Answer 1

以下内容可以解决您的问题。总结：

我们使用jQuery的import {Component, NgModule, ViewChild, ElementRef, Input, Output, EventEmitter, ViewContainerRef, ComponentRef, ComponentFactoryResolver, ReflectiveInjector} from '@angular/core' import {BrowserModule} from '@angular/platform-browser' @Component({ selector: 'any-comp', template: '<div (click)="clicked.emit($event)">here i am.. {{name}}</div>' }) export class AnyComponent { @Input() name; @Output() clicked = new EventEmitter(); constructor() { console.log('some1 created me.. ! :)'); } } @Component({ selector: 'my-app', template: ` <div> <h2>Hello {{name}}</h2> <template #placeHolder> </template> </div> `, }) export class App { @ViewChild('placeHolder', {read: ViewContainerRef}) private _placeHolder: ElementRef; name:string; constructor(private _cmpFctryRslvr: ComponentFactoryResolver) { this.name = 'Angular2' } ngOnInit() { let cmp = this.createComponent(this._placeHolder, AnyComponent); // set inputs.. cmp.instance.name = 'peter'; // set outputs.. cmp.instance.clicked.subscribe(event => console.log(`clicked: ${event}`)); // all inputs/outputs set? add it to the DOM .. this._placeHolder.insert(cmp.hostView); } public createComponent (vCref: ViewContainerRef, type: any): ComponentRef { let factory = this._cmpFctryRslvr.resolveComponentFactory(type); // vCref is needed cause of that injector.. let injector = ReflectiveInjector.fromResolvedProviders([], vCref.parentInjector); // create component without adding it directly to the DOM let comp = factory.create(injector); return comp; } } @NgModule({ imports: [ BrowserModule ], declarations: [ App, AnyComponent ], // ! IMPORTANT entryComponents: [ AnyComponent ], // ! IMPORTANT --> would be lost due to Treeshaking.. bootstrap: [ App ] }) export class AppModule {}方法
我们检查下拉元素上选择的值是否与“其他”匹配
如果是，我们检查是否已将新输入字段插入DOM
如果我们没有，我们使用jQuery的change()方法

appendTo()

$(document).ready(function(){
    $('.degree-selected').change(function () {
        var selectedItem = $(this).val();
        if (selectedItem === 'other') {
            if (!$('#other-field').length) {
                $('<input type="text" name="other-field" id="other-field">').appendTo('#form'); 
            }
        }
    });
});

在下拉菜单中选择选项后，添加新的输入字段

1 个答案: