Selection list already present in the HTML
selection list에서 select 된 값을 retrieve 하기 위해 <select>
element에 jQuery 의 val
() method 를 사용합니다. 그리고 새로운 selection 을 indicate 하기 위해 val
(value)를 사용합니다. multiple-selection list 의 경우에는 value
는 값들의 배열입니다. (아무것도 select 되지 않으면 empty 입니다.)
Retrieve the values associated with selected items
<!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 multiple=multiple>
<option value=1> 1 bedroom </option>
<option value=2 selected=selected> 2 bedrooms </option>
<option value=3 selected=selected> 3 bedrooms </option>
<option value=4> 4 bedrooms </option>
<option value=5> 5 bedrooms </option>
</select>
</div>
</div>
</body>
</html>
<script>
alert ($("select").val ()); // displays an array [2, 3]
$("select").val ([1, 2]);
alert ($("select").val ()); // displays an array [1, 2]
</script>
|
|
tistory470_01.html
Selection list dynamically created
val
() and val
(value) methods 는 selection list의 값을 retrieve 하거나 assign 하기 위해 사용됩니다. 그런데 아마 selection list 의 refresh 가 일어나지 않는 경우가 있을 겁니다. 이럴 때는 selectmenu
("refresh") method 를 사용할 필요가 있습니다.
jQuery 에서 리스트를 다이나믹하게 생성되는 것을 생각해 보세요. selectmenucreate event 와 selection list 에 새로운 값을 assign 하는 것을 보겠습니다.
Assign a value to a selection list dynamically created
<!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>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "<select data-native-menu=false>";
html += "<option value=1> 1 bedroom </option>";
html += "<option value=2> 2 bedrooms </option>";
html += "<option value=3> 3 bedrooms </option>";
html += "<option value=4> 4 bedrooms </option>";
html += "<option value=5> 5 bedrooms </option>";
html += "</select>";
$("#home div:jqmData(role=content)").append (html);
$("select").bind ("selectmenucreate", function ()
{
$("select").val (4);
$("select").selectmenu ("refresh");
});
</script>
|
|
만약 selectmenu
("refresh") instruction을 생략하면 이 리스트는 refresh 되지 않을 겁니다. 그러면 selected value 는 display 되지 않을 겁니다. (이럴 경우 리스트의 첫번째 값이 디폴트로 select 될 겁니다.)
다음 프로그램은 selectmenu
("refresh") instruction을 사용하지 않고 구현한 프로그램입니다.
Assign a value to a selection list without using selectmenu ("refresh")
<!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>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "<select data-native-menu=false>";
html += "<option value=1> 1 bedroom </option>";
html += "<option value=2> 2 bedrooms </option>";
html += "<option value=3> 3 bedrooms </option>";
html += "<option value=4> 4 bedrooms </option>";
html += "<option value=5> 5 bedrooms </option>";
html += "</select>";
$("#home div:jqmData(role=content)").append (html);
$("select").val (4);
</script>
|
|
이 경우에는 selectmenucreate
event 를 사용하지 않습니다. 그래도 작동을 합니다. selection list 에 값이 assign 될 떄 리스트는 아직 생성되지 않았습니다. 그래서 최종 display 되기 전에 수정될 수 있는 겁니다. selectmenucreate
event 에서 동작할 때는 리스트가 생성된 이후였습니다. 그래서 어떤 변화가 있으면 refresh 가 필요한 겁니다.
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| 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 추가하기와 지우기 (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 |
| input field 관련 예제들 (0) | 2012.11.10 |