>  기사  >  웹 프론트엔드  >  select_javascript 기술 아래에 기본 옵션의 값과 텍스트를 추가하는 js 메소드

select_javascript 기술 아래에 기본 옵션의 값과 텍스트를 추가하는 js 메소드

WBOY
WBOY원래의
2016-05-16 16:33:271562검색

49e74c368f19f53ac99dfbe070e31430

jsp의 드롭다운 상자 태그:

31f71105f7604211fbc8831e160146e8f5337ba768c8727711513f90b3ca086d

코드 복사 코드는 다음과 같습니다.

ea444e6a14303e8217bef847d47d859b
multiple="true"는 다중 선택을 지원함을 의미합니다.



js의 select 태그 아래에 항목을 생성하는 유연한 방법:

코드 복사 코드는 다음과 같습니다.
353aeaeb304f2c117f8f343d84e199ccvar oSelect = $("sjx");2929bf321ed5d56c56db0554e6cf1d26 54bdf357c58b8a65c66d7c19c8e4d114//sjx는 html입니다. JSP 페이지의 select 태그 ID입니다. Extjs를 사용하는 경우 EXT.getDom('sjx')을 사용하여 태그를 가져올 수 있습니다

var oOption = document.createElement("OPTION");2929bf321ed5d56c56db0554e6cf1d26 54bdf357c58b8a65c66d7c19c8e4d114//js의 select 태그 아래에 OPTION 하위 태그를 생성합니다
oSelect.options.add(oOption);2929bf321ed5d56c56db0554e6cf1d26 54bdf357c58b8a65c66d7c19c8e4d114//select 태그에 새 OPTION 하위 태그를 추가합니다
oOption.value = "001";2929bf321ed5d56c56db0554e6cf1d2654bdf357c58b8a65c66d7c19c8e4d114//콘텐츠에 해당하는 값
oOption.innerHTML ="Little Apple";2929bf321ed5d56c56db0554e6cf1d2654bdf357c58b8a65c66d7c19c8e4d114//표시된 드롭다운 상자의 내용
...등등

참고: js의 이 메서드는 특정 상황에서 더 유용합니다. 예를 들어 여기의 요청은 특정 인터페이스를 반환하지 않습니다. 즉, 전체 인터페이스가 새로 고쳐지지 않습니다. 대신 Ajax 비동기 요청을 사용하여 일부 로컬 데이터 요청을 수행합니다. 이때 아래 strut2 메소드는 유효하지 않습니다.

코드 복사 코드는 다음과 같습니다.
49e74c368f19f53ac99dfbe070e3143049e74c368f19f53ac99dfbe070e31430for(...){
HashMap map = new HashMap()
map.put("BM","001")
map.put("MC","작은 사과")
sjxList.add(맵)
}

또 다른 방법도 매우 일반적입니다. struts2의 기능을 사용하여 Action에서 Lista87fdacec66f0909fc0757c19f2d2b1d 변수를 정의하고(이 예를 sjxList라는 이름으로 사용) set 및 get 메소드를 설정합니다.

HashMap 객체를 통해 다음과 같은 콘텐츠를 추가하세요.

bc5574f69a0cba105bc93bd3dc13c4ec 인터페이스로 돌아가면 인터페이스의 선택 드롭다운 상자에 "Little Apple"이 표시됩니다.

<pre name="code" class="html">最简单的一种方式: 
直接在jsp页面手动添加select标签的OPTION项 
<html> 
<body> 
<form> 
<select id="cars" name="cars"> 
<option value="volvo">Volvo</option> 
<option value="binli">Binli</option> 
<option value="mazda" selected="selected">Mazda</option> 
<option value="audi">Audi</option> 
</select> 
</form> 
</body> 
</html> 
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.