336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>append option / remove option</title>
<meta http-equiv=
"content-type"
content=
"text/html;charset=UTF-8"
>
</head>
<body>
<table>
<tr>
<td>
<select id=
"sel"
name=
"sel"
style=
"WIDTH: 245px; HEIGHT: 240px;"
size=
"20"
multiple>
<option value=
"1"
>1</option>
<option value=
"2"
>2</option>
<option value=
"3"
>3</option>
<option value=
"4"
>4</option>
<option value=
"5"
>5</option>
<option value=
"6"
>6</option>
<option value=
"7"
>7</option>
<option value=
"8"
>8</option>
<option value=
"9"
>9</option>
<option value=
"10"
>10</option>
</select>
<input type=
"button"
value=
"Delete"
id=
"btnRemoveLeft"
/>
<input type=
"button"
value=
"Selected Value "
id=
"getValue"
/>
<input type=
"button"
value=
"All Value "
id=
"getSelectedValue"
/>
<input type=
"text"
id=
"addOption"
style=
"width:183px;"
/>
<input type=
"button"
value=
"Add"
id=
"btnAdd"
/>
</td>
<td>
<input type=
"button"
value=
"Move=>"
id=
"btnMoveRight"
/>
<input type=
"button"
value=
"<=Move"
id=
"btnMoveLeft"
/>
<input type=
"button"
value=
"Copy=>"
id=
"btnCopyLeft"
/>
<input type=
"button"
value=
"<=Copy"
id=
"btnCopyLeft2"
/>
</td>
<td>
<select id=
"sel2"
name=
"sel2"
style=
"WIDTH: 245px; HEIGHT: 240px;"
size=
"20"
multiple>
</select>
<input type=
"button"
value=
"Delete"
id=
"btnRemoveRight"
/>
<input type=
"button"
value=
"Selected Value "
id=
"getValue2"
/>
<input type=
"button"
value=
"All Value"
id=
"getSelectedValue2"
/>
<input type=
"text"
id=
"addOption2"
style=
"width:183px;"
/>
<input type=
"button"
value=
"Add"
id=
"btnAdd2"
/>
</td>
</tr>
</table>
</body>
<script type=
"text/javascript"
>
<!--
$(
function
(){
$(
"#btnRemoveLeft"
).on(
"click"
,
function
(){
$(
'#sel option:selected'
).each(
function
() {
$(
this
).remove();
});
});
$(
"#btnRemoveRight"
).on(
"click"
,
function
(){
$(
'#sel2 option:selected'
).each(
function
() {
$(
this
).remove();
});
});
$(
"#btnMoveRight"
).on(
"click"
,
function
(){
$(
'#sel option:selected'
).each(
function
() {
$(
this
).remove().appendTo(
'#sel2'
);
});
});
$(
"#btnMoveLeft"
).on(
"click"
,
function
(){
$(
'#sel2 option:selected'
).each(
function
() {
$(
this
).remove().appendTo(
'#sel'
);
});
});
$(
"#getValue"
).on(
"click"
,
function
(){
var
values =
""
;
$(
'#sel option'
).each(
function
() {
values= values +
"/"
+ $(
this
).val();
});
alert(values);
});
$(
"#getValue2"
).on(
"click"
,
function
(){
var
values =
""
;
$(
'#sel2 option'
).each(
function
() {
values= values +
"/"
+ $(
this
).val();
});
alert(values);
});
$(
"#getSelectedValue"
).on(
"click"
,
function
(){
var
values =
""
;
$(
'#sel option:selected'
).each(
function
() {
values= values +
"/"
+ $(
this
).val();
});
alert(values);
});
$(
"#getSelectedValue2"
).on(
"click"
,
function
(){
var
values =
""
;
$(
'#sel2 option:selected'
).each(
function
() {
values= values +
"/"
+ $(
this
).val();
});
alert(values);
});
$(
"#btnCopyLeft"
).on(
"click"
,
function
(){
$(
'#sel option:selected'
).each(
function
() {
$(
this
).clone().appendTo(
'#sel2'
);
});
});
$(
"#btnCopyLeft2"
).on(
"click"
,
function
(){
$(
'#sel2 option:selected'
).each(
function
() {
$(
this
).clone().appendTo(
'#sel'
);
});
});
$(
"#btnAdd"
).on(
"click"
,
function
(){
if
($(
'#sel'
).find(
"[value='"
+$('#addOption
').val().replace('
"','\'')+"
']").length == 0)
{
$('
#sel').append('<option value="'+$('#addOption').val().replace('"','\'')+'">'+$('#addOption').val()+"</option>");
}
else
{
alert(
"있어요."
);
}
});
$(
"#btnAdd2"
).on(
"click"
,
function
(){
if
($(
'#sel2'
).find(
"[value='"
+$('#addOption2
').val().replace('
"','\'')+"
']").length == 0)
{
$('
#sel2').append('<option value="'+$('#addOption2').val().replace('"','\'')+'">'+$('#addOption2').val()+"</option>");
}
else
{
alert(
"있어요."
);
}
});
});
$(window).load(
function
(e){
});
//-->
</script>
</html>
'jQuery & script' 카테고리의 다른 글
[Script] 숫자만 입력받기 (0) | 2017.11.21 |
---|---|
[Script]숫자 한국 원단위 변환 (0) | 2017.11.21 |