사용자가 무언가를 선택했는지 어떻게 확인할 수 있습니까? <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옵션 요소 의 속성을 사용하여 기본적으로 선택 항목을 선택할 수 있습니다 . requiredselect 요소 의 속성을 사용하여 사용자가 무언가를 선택하도록 할 수 있습니다.
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>-1좋습니다. 죄송합니다. 먼저 의견을 명확하게하지 않았습니다.
<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>의 value속성을 option빈 문자열 로 설정해야 합니다.
<select name="status" required>
<option selected disabled value="">what's your status?</option>
<option value="code">coding</option>
<option value="sleep">sleeping</option>
</select>select반환 것입니다 value선택의를 option서버에 때 사용자 프레스 submit온을 form. 비어있는 value것은 비어있는 text입력 과 동일 합니다-> required메시지를 올리는 것 .
value 속성은 양식이 제출 될 때 서버로 전송 될 값을 지정합니다.
이것을 시도해보십시오. 이것은 효과가 있습니다. 나는 이것을 시도했고 이것이 효과가 있습니다.
<!DOCTYPE html>
<html>
<body>
<form action="#">
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>첫 번째 옵션의 값이 null이면 완벽하게 작동합니다. 설명 : HTML5는 버튼 제출시 널값을 읽습니다. null이 아닌 경우 (값 속성) 선택한 값이 null이 아닌 것으로 간주되므로 유효성 검사가 작동했을 것입니다 (예 : 옵션 태그에 데이터가 있는지 확인). 따라서 유효성 검사 방법을 생성하지 않습니다. 그러나 value 속성이 null 즉 (value = "")로 설정되면 HTML5가 첫 번째 또는 기본 선택 옵션에서 빈 값을 감지하여 유효성 검사 메시지를 표시합니다. 질문 주셔서 감사합니다. 도와 줄 수있어서 기뻐. 내가했는지 알게되어 기쁘다.
이 시도
<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>JQuery를 사용하여 동적으로 수행 할 수도 있습니다
필요한 세트
$("#select1").attr('required', 'required');필요한 제거
$("#select1").removeAttr('required');
selectedIndex입니다.