사용자 선택에 따라 자리 표시 자 텍스트 변경

Question

jQuery가 허용되지만 HTML 만 사용하는 것이 좋습니다.

몇 가지 옵션이있는 선택 상자가 있습니다. 사용자가 '이름'을 선택하면 자리 표시 자 텍스트 '입력하십시오'가 인접한 텍스트 상자에 나타나기를 원합니다.

마찬가지로 'ID'-> '사용자 ID 입력'.

이 내가 알아낼 수 없었던 클라이언트에 의해 요구 사항입니다 http://jsfiddle.net/Uy9Y3/

<select> 
    <option value="-1">Select One</option> 
    <option value="0">Name</option> 
    <option value="1">ID</option> 
</select> 
<input type="text"> 

참조하십시오.

도움이된다면 웹 사이트는 스프링 프레임 워크를 사용하고 있습니다.

Answer 1

선택 항목을 업데이트 할 때 자리 표시자를 업데이트해야하므로 javascript를 사용해야합니다.

HTML5 data- 스타일 속성을 사용하여 각 option 요소에서 속성으로 표시 할 자리 표시자를 설정할 수 있습니다. 그런 다음 jQuery를 사용하여 입력 상자의 자리 표시 자 속성을 업데이트하는 변경 이벤트 리스너를 첨부하십시오.

이전 버전의 IE에서는 자리 표시 자 속성이 적용되지 않으므로 이전 IE를 지원해야하는 경우 해당 기능을 다른 라이브러리에 polyfill해야합니다.

Working Demo

HTML

<select id="mySelect"> 
    <option data-placeholder="" value="-1">Select One</option> 
    <option data-placeholder="Enter your name" value="0">Name</option> 
    <option data-placeholder="Enter your ID" value="1">ID</option> 
</select> 
<input id="myInput" type="text"> 

jQuery를

$('#mySelect').on('change', function() { 
    var placeholder = $(this).find(':selected').data('placeholder'); 
    $('#myInput').attr('placeholder', placeholder); 
}); 

Answer 2

이 작업을 수행하는 방법에 대한 예는 다음 jsfiddle를 참조하십시오

이 jsfiddle는 OnChange 이벤트에 배치 기능을 찾을 수없는 것 같다 때문 jQuery를 사용하는 것을

http://jsfiddle.net/sW6QP/

참고.

당신이 jQuery를없이하고 싶은 경우,이에 대한 선택 라인 변경 :

<select id="selectionType" onChange="setPlaceholder();"> 

대신 $("#selectionType").on("change",function() {의를 대신 이렇게 :

function setPlaceholder() { 

합니다 (});을 변경해야합니다 ~ })

Answer 3

JavaScript가 필요합니다. HTML 만 사용하면 인라인으로 처리 할 수 ​​있습니다.

<select onchange="document.querySelector('input').setAttribute('placeholder', 'Enter your ' + this.options[this.selectedIndex].text);"></select>