Question

我有两个html页面，我的设计是下拉。

我在下拉列表中成功获取值。我保存页面后选择了一个值。它已成功保存。在我正在编辑该页面中的页面之后，我试图用选定的值显示相同的下拉列表，但它不起作用

<form>  
<div class="form-group ">
<label for="empcode" class="col-lg-4 control-label"><span class="mandatory"></span> Code </label>
 <div class="col-lg-6">
 <select class="form-control select2" id="empcode" ></select>
  </div>
</div>
</form> 

$( ".select2" ).select2( );
 var $selectcode = $('#empcode');                               
$.getJSON('/empCodes', function(data1){                            
$selectcode.html('');
$selectcode.append('<option>'+"--Select--"+'</option>');
$.each(data1.data, function(key, val){
$selectcode.append('<option id='+val.id+'>'+val.code+'</option>');
})
});

修改页码：

<form>
<div class="form-group ">
<label for="empcode" class="col-lg-4 control-label"><span class="mandatory"></span> Code </label>
 <div class="col-lg-6">
 <select class="form-control select2" id="empcode" th:value="*{code}">
 </select>
 </div>
 </div>
</form>

使用thymeleaf th:value="*{code}"我正在显示所选值。但无效。

我的代码中有错误吗？

Answer 1

这里是你在选择器中的错误

将此var $selectcode = $('empcode');更改为var $selectcode = $('#empcode');

如果您按ID选择元素，则元素选择器应为#。

所以$('empcode')应该是这样$('#empcode');

在每次完成/数据追加后，再次调用库函数。

例如

var $selectcode = $('#empcode');
$.getJSON('/empCodes', function(data1) {
    $selectcode.html('');
    $selectcode.append('<option>' + "--Select--" + '</option>');
    $.each(data1.data, function(key, val) {
        $selectcode.append('<option id=' + val.id + '>' + val.code + '</option>');
    });
    // function here 
    $(".select2").select2();
});

Answer 2

Jquery没有<div> <input type="file" id="photo" (change)="onChange($event)" /> </div> <div class="col-md-6 mb-4 mt-3"> <button (click)="upload()" class="btn btn-primary w-100">Upload Picture</button> </div>方法。检查你的第一行代码。

import { Http, Response } from '@angular/http';
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
import "rxjs/add/operator/do";
import "rxjs/add/operator/map";
const uploadURL = '/upload';

@Component({

selector: 'upload-modal',
templateUrl: './upload-modal.component.html',
styleUrls: ['./upload-modal.component.css']
})
export class UploadModalComponent {
displayMessage: string = '';
constructor(public activeModal: NgbActiveModal, private http: Http, private el: ElementRef) { }
setDisplayMessage(msg: string) {
   this.displayMessage = msg;
 }

upload() {
   this.activeModal.dismiss('Cross click');
 }

onChange(event) {
 let inputEl: HTMLInputElement = this.el.nativeElement.querySelector('#photo');

let fileCount: number = inputEl.files.length;

let formData = new FormData();

if (fileCount > 0) { // a file was selected

  formData.append('photo', inputEl.files.item(0));

  this.http
    .post(uploadURL, formData).map((res: Response) => res.json()).subscribe(
    // map the success function and alert the response
    (success) => {
      alert("success");
    },
    (error) => alert("error"));
   }

  }
}

你能准确解释一下吗？什么功能不起作用？

您是否要将选定的字词设置为select2？如果答案是肯定的，我可以为您捐赠简单的代码。

<强>码

$( ".select2" ).select();

select2 bootstrap jquery在编辑模式下未显示所选值

2 个答案: