[javascript] HTML5의 <select> 필드에 필수 속성을 적용 할 수 있습니까?
사용자가 무언가를 선택했는지 어떻게 확인할 수 있습니까? <select>
HTML5 필드에서 있습니까?
나는 <select>
새로운 것을 지원하지 않는 것을 본다required
… 속성을 그때 자바 스크립트를 사용해야합니까? 아니면 내가 놓친 것이 있습니까? : /
답변
필수 : 첫 번째 값을 비 웁니다-빈 값에 필요한 작업
전제 조건 : 올바른 html5 DOCTYPE 및 이름 지정된 입력 필드
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
당으로 문서 (리스팅 (listing)와 대담은 내 꺼야)
필수 속성은 부울 속성입니다.
지정된 경우 사용자는 양식을 제출하기 전에 값을 선택해야합니다.선택 요소가
- 필수 속성이 지정되어 있습니다.
- 여러 속성을 지정하지 않은 경우
- 디스플레이 크기가 1 (SIZE = 2 이상이 아님-필요없는 경우 생략)
- 및 옵션의 선택 요소의 목록에서 첫 번째 옵션 요소의 값이 (있는 경우) 빈 문자열 인 경우 (즉, 현재와 같은
value=""
)- 해당 옵션 요소의 상위 노드는 선택 요소이며 (optgroup 요소는 아님)
그 옵션은 요소의 자리 표시 자 레이블 선택 옵션입니다.
답변
<select>
요소는 지원하지 않습니다 required
사양에 따라, 속성 :
어떤 브라우저가 이것을 존중하지 않습니까?
(물론 사용자가 JavaScript를 사용할 수 있음을 보장 할 수 없으므로 서버에서 검증해야합니다.)
답변
selected
옵션 요소 의 속성을 사용하여 기본적으로 선택 항목을 선택할 수 있습니다 . required
select 요소 의 속성을 사용하여 사용자가 무언가를 선택하도록 할 수 있습니다.
Javascript에서, selectedIndex
선택된 옵션의 색인 value
을 얻기 위해 특성을 점검하거나, 선택된 옵션 의 값을 얻기 위해 특성을 점검 할 수 있습니다 .
HTML5 사양에 따르면, selectedIndex
“첫번째 선택된 항목의 인덱스를 반환합니다 (있는 경우) 또는 선택된 항목이없는 경우 -1을 value
반환합니다 . 그리고 “있는 경우 첫 번째 선택된 항목의 값을 반환합니다 (있는 경우) 선택된 항목이 없습니다. “따라서 selectedIndex = -1이면 아무것도 선택하지 않은 것입니다.
<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
function displaySelection()
{
var mySelect = document.getElementById("someSelectElement");
var mySelection = mySelect.selectedIndex;
alert(mySelection);
}
</script>
답변
예, 작동합니다.
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
첫 번째 옵션은 비워 두어야합니다.
답변
<form action="">
<select required>
<option selected disabled value="">choose</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="grey">grey</option>
</select>
<input type="submit">
</form>
답변
먼저 첫 번째 옵션에서 빈 값을 할당해야합니다. 즉, 여기에서만 선택하십시오. 필요한 것만 작동합니다.
답변
선택 상자의 첫 번째 항목 값을 비워 두십시오.
따라서 FORM을 게시 할 때마다 빈 값을 얻고이 방법을 사용하면 사용자가 드롭 다운에서 아무것도 선택하지 않았다는 것을 알 수 있습니다.
<select name="user_role" required>
<option value="">-Select-</option>
<option value="User">User</option>
<option value="Admin">Admin</option>
</select>