easyUI 드롭다운 목록 클릭 이벤트의 예시에 대한 자세한 설명

이 글은 주로 easyUI 드롭다운 목록 클릭 이벤트의 사용법을 자세히 소개하고 있습니다. 관심 있는 친구들이 참고할 수 있습니다.

이 글의 예시는 easyUI 사용 방법을 공유합니다. 드롭다운 리스트의 클릭 이벤트 방식은 참고용이며, 구체적인 내용은 다음과 같습니다

입력 및 선택 여기서 선택은 다음과 같이 생성됩니다.

Create js

array

[{  
  "id":1,  
  "text":"text1"  
},{  
  "id":2,  
  "text":"text2"  
},{  
  "id":3,  
  "text":"text3",  
  "selected":true  
},{  
  "id":4,  
  "text":"text4"  
},{  
  "id":5,  
  "text":"text5"  
}]

via json 예:

html 코드 조각:

<select id="in_edit_netlink" style="width:160px;" class="easyui-combobox" data-options="valueField:&#39;id&#39;,textField:&#39;text&#39;,editable:false" >
</select>

js 코드 조각:

var ljfsArray = new Array();
  var objHTTP = new Object();
  objHTTP.text = "HTTP";
  var objTCP = new Object();
  objTCP.text = "TCP";
  objTCP.id = 1;
  objHTTP.id = 2;
  if (data.ljfs == "HTTP") {
    objHTTP.selected=true;
  } else {
    objTCP.selected=true;
  }
  ljfsArray.push(objHTTP);
  ljfsArray.push(objTCP);
  $('#in_edit_netlink').combobox('loadData', ljfsArray);

페이지 효과 표시:

속성

설명:

valueField: 'id'---objTCP.id--->옵션 값 값textField:'text'---objTCP.text--->페이지 표시 값

objTCP.selected= true; -- ->기본적으로 표시

수정 이벤트 클릭

　

onSelect는
onChange

와 동일합니다. 문제는 easyUI가 onChange를 지원하지 않지만 html에서 onSelect를 지원하지 않는다는 것입니다. onSelect는 js 코드에서 사용해야 합니다:

$("#in_edit_netlink").combobox({
    onSelect: function () {
      connectionType = $('#in_edit_netlink').val();
      if (connectionType == 1) {
       $('#in_edit_sjjh').textbox('setValue', tcpIp);
      } else {
       $('#in_edit_sjjh').textbox('setValue', httpIp);
      }
    }
  })

$(function () {
  
})

를 사용하여 기본적으로 로드한 후 onSelect 이벤트를 정상적으로 사용할 수 있습니다.

[관련 추천]

1.
Javascript 무료 동영상 튜토리얼

2.vue v-model 양식 컨트롤 바인딩 예시 튜토리얼

3. Bootstrap 폼 유효성 검사 formValidation 상세 예시

4. JS의 OffsetWidth 버그 및 처리 방법

5. jQuery Validate 다중 이름 검증 상세 예시

위 내용은 easyUI 드롭다운 목록 클릭 이벤트의 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!