리스트에서 아이템을 추가하거나 지우는 것은 jQuery 의 메소드를 사용해서 처리합니다. 예를 들어 append
()는 리스트의 끝에 아이템을 추가하고 remove
() 는 그 메소드가 붙은 아이템을 제거합니다.
Adding and deleting items from the selection list
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Choose an apartment type: </span>
<select data-native-menu=false>
<option value=1> 1 bedroom </option>
<option value=2> 2 bedrooms </option>
<option value=3> 3 bedrooms </option>
<option value=4> 4 bedrooms </option>
<option value=5> 5 bedrooms </option>
</select>
</div>
</div>
</body>
</html>
<script>
$("select").append ("<option value=6> 6 bedrooms </option>");
$("option[value=1]").remove ();
</script>
|
| |
tistory471_01.html
리스트의 첫번째 아이템은 지워졌습니다. 그리고 6 bedrooms는 추가 됐죠.
어쨌든 이 작업은 항상 완벽하게 동작하지 않을 수도 있습니다. 왜냐하면 elements 가 추가되거나 삭제될 때 jQuery Mobile 에 리스트가 아직 생성되지 않았기 때문이죠. 그러니까 이것이 HTML code 로 전환될 때 리스트에 우리가 추가하고 삭제한 것이 적용되서 만들어지게 되는 것이죠. 만약 리스트가 create 되고 난 다음에 이 추가나 삭제를 했다면 여러분은 여기에 추가적으로 selectmenu
("refresh", true) method 를 사용해야 합니다. 여기서 true
value 는 파라미터처럼 전달이 되는데요 리스트를 rebuild 하도록 하는 겁니다.
Insert or remove items after the list creation
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<span> Choose an apartment type: </span>
<select data-native-menu=false>
<option value=1> 1 bedroom </option>
<option value=2> 2 bedrooms </option>
<option value=3> 3 bedrooms </option>
<option value=4> 4 bedrooms </option>
<option value=5> 5 bedrooms </option>
</select>
</div>
</div>
</body>
</html>
<script>
$("select").bind ("selectmenucreate", function ()
{
$("select").append ("<option value=6> 6 pièces </option>");
$("option[value=1]").remove ();
$("select").selectmenu ("refresh", true); // true = forceRebuild
});
</script>
|
|
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| jQuery Mobile checkbox로 HTML element 변환하기 (0) | 2012.11.20 |
|---|---|
| checkbox 다이나믹하게 생성하기 (0) | 2012.11.19 |
| selection list 관련 예제들 (0) | 2012.11.18 |
| selectiion list customize 하기 (0) | 2012.11.17 |
| selection list 에서 이벤트 관리하기 (0) | 2012.11.17 |
| selection list 에서 select 된 아이템 값 할당하거나 가져오는 방법 (0) | 2012.11.15 |
| selection 리스트 열고 닫기 (0) | 2012.11.13 |
| Ajax 로 selection list 삽입하기 (0) | 2012.11.12 |
| HTML element를 jQuery Mobile selection list로 바꾸기 (0) | 2012.11.12 |
| 다이나믹하게 selection list 생성하기 (0) | 2012.11.11 |