1. Description
| jQuery(":selected") |
| selected된 Element들을 찾는다. 이 selector는 선택된 <option> Element를 찾는데 사용되며, checkbox나 radio버튼은 :checked를 사용해야 한다. ※ 속도 향상을 위해서는 선행하는 Selector다음에 .filter(":selected")처럼 사용하는 것이 좋다고 한다. 자세한 내용은 「5. See also」 또는 「6. Reference」를 참고하세요. |
2. Example
#1버튼을 클릭하면 선택되어진 <option> Element의 배경색을 변경한다. <option>을 재선택하고 다시 버튼을 클릭하면 배경색이 재설정된다.
※ 「CTRL + 마우스 왼쪽클릭」 또는 「SHIFT + 마우스 왼쪽클릭」을 하면 어러 <option>을 선택할 수 있다.
Input Collections!!
| [type="radio"] |
| [type="checkbox"] |
| [type="hidden"] is here... |
[HTML Code]
[//HTML Code]
3. Code
더보기
<!-- ---------------------------------------------------------
--
-- Author: 1q74.tistory.com
--
--------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/jquery/selector/selected</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
<div name="_1q74-example-root">
<div name="_1q74-example-1">
<h4>Input Collections!!</h4>
<table name="bigtech" border="1">
<tr>
<td>
<input type="text" name="text" value="[type='text']"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="button" value="[type='button']"/>
</td>
</tr>
<tr>
<td>
<input type="image" name="image" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png"/>
</td>
</tr>
<td>
<input type="submit" name="submit" value="[type='submit']"/>
</td>
</tr>
<tr>
<td>
<input type="file" name="file" value="[type='file']"/>
</td>
</tr>
<tr>
<td>
<input type="password" name="password" value="[type='password']"/>
</td>
</tr>
<tr>
<td>
<input type="reset" name="reset" value="[type='reset']"/>
</td>
</tr>
<tr>
<td>
<input type="radio" name="radio" value="[type='radio']"/>[type="radio"]
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="checkbox" value="[type='checkbox']"/>[type="checkbox"]
</td>
</tr>
<tr>
<td>
<select name="select" style="width:100%;" size="10" multiple>
<option>option-1</option>
<option>option-2</option>
<option>option-4</option>
<option>option-5</option>
<option>option-6</option>
<option>option-7</option>
<option>option-8</option>
<option>option-9</option>
<option>option-10</option>
<option>option-11</option>
<option>option-12</option>
<option>option-13</option>
<option>option-14</option>
<option>option-15</option>
</select>
</td>
</tr>
<tr>
<td>
<textarea>textarea</textarea>
</td>
</tr>
<tr>
<td>
[type="hidden"] is here...
<input type="hidden" name="hidden" value="hidden"/>
</td>
</tr>
</table>
</div>
<div name="_1q74-example-bottom">
<br/>
<button name="btn-find">#1. $("[name='_1q74-example-1'] option:selected")</button>
</div>
</div>
<hr/>
<h5>[HTML Code]</h5>
<div name="_1q74-source">
</div>
<h5>[//HTML Code]</h5>
<script>
var btnFind = $("[name='btn-find']");
var rainbowColors = [
"red",
"orange",
"yellow",
"green",
"blue",
"navy",
"purple"
];
btnFind.click(function() {
let allElements = $("[name='_1q74-example-1'] option");
allElements.removeAttr("style");
let elements = $("[name='_1q74-example-1'] option:selected");
elements.each(function(i, el) {
const element = $(el);
let colorIndex = i;
if(colorIndex >= rainbowColors.length) {
colorIndex %= rainbowColors.length;
}
if(!element.is("[style]")) {
element.css("background", rainbowColors[colorIndex]);
}
});
});
// ------------------------------------------------------
// 소스출력
// ------------------------------------------------------
var textSource = $("[name='_1q74-source']");
var exampleHtml = $("[name='_1q74-example-root']").html();
var specialCharLines = textSource.text(exampleHtml).html().split("\n");
textSource.html(specialCharLines.join("<br/>").replaceAll("\t", " "));
</script>
<style>
[name="_1q74-example-root"] {
min-height: 170px;
}
[name="_1q74-example-1"] {
min-height: 140px;
}
[name="_1q74-example-root"] [type="image"]{
width: 100px;
}
[name="_1q74-example-1"] td {
min-width: 100px;
min-height: 30px;
}
[name|="_1q74-example"] button
,[name="_1q74-source"] button {
background: lightgray;
border: 5px outset;
min-height: 30px;
}
[name|="_1q74-example"] button:active
,[name="_1q74-source"] button:active {
border: 2px inset;
min-height: 30px;
}
</style>
</body>
</html>4. File
[javascript][jquery][selector]selected.html
0.00MB
5. See also
pseudo-class, useversal-selector, jquery-extensions
6. Reference
https://api.jquery.com/selected-selector/
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #60】:target Selector (0) | 2023.03.15 |
|---|---|
| 【jQuery/Selector #59】:submit Selector (0) | 2023.03.15 |
| 【jQuery/Selector #57】:root Selector (0) | 2023.03.15 |
| 【jQuery/Selector #56】:reset Selector (0) | 2023.03.15 |
| 【jQuery/Selector #55】:radio Selector (0) | 2023.03.15 |