사용자 정의 값을 입력하는 옵션이있는 HTML 선택 양식
사용자가 맞춤 텍스트 값을 입력하거나 드롭 다운에서 선택할 수있는 입력 필드를 갖고 싶습니다. 일반 선택은 드롭 다운 옵션 만 제공합니다.
인스턴스 포드에 대한 사용자 정의 값을 어떻게 받아 들일 수 있습니까?
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
편집 : 데드 링크 제거, 솔루션이 답변에 있습니다.
HTML5에는 기본 제공 콤보 상자가 있습니다. 텍스트 input와 datalist. 그런 다음 의 값을 사용하여 에 list속성을 추가 합니다 .inputiddatalist
모든 브라우저에서 작동 하는 . 업데이트 : 2019 년 3 월부터 모든 주요 브라우저 (현재 Safari 12.1 및 iOS Safari 12.3 포함) datalist것은 아닙니다datalist는이 기능에 필요한 수준으로 지원 됩니다. 자세한 브라우저 지원 은 caniuse 를 참조하십시오 .
다음과 같이 보입니다.
<input type="text" list="cars" />
<datalist id="cars">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</datalist>Alen Saqe의 최신 JSFiddle은 Firefox에서 저를 위해 전환되지 않았으므로 모든 브라우저 / 장치에서 데이터 목록 태그를 수락하는 날까지 양식 (제출 관련) 내에서 잘 작동하는 간단한 html / javascript 해결 방법을 제공 할 것이라고 생각했습니다. 자세한 내용과 실제 작동을 확인하려면 http://jsfiddle.net/6nq7w/4/ 로 이동 하십시오. 참고 : 토글 링 형제 사이에 공백을 허용하지 마십시오!
<!DOCTYPE html>
<html>
<script>
function toggleField(hideObj,showObj){
hideObj.disabled=true;
hideObj.style.display='none';
showObj.disabled=false;
showObj.style.display='inline';
showObj.focus();
}
</script>
<body>
<form name="BrowserSurvey" action="#">
Browser: <select name="browser"
onchange="if(this.options[this.selectedIndex].value=='customOption'){
toggleField(this,this.nextSibling);
this.selectedIndex='0';
}">
<option></option>
<option value="customOption">[type a custom value]</option>
<option>Chrome</option>
<option>Firefox</option>
<option>Internet Explorer</option>
<option>Opera</option>
<option>Safari</option>
</select><input name="browser" style="display:none;" disabled="disabled"
onblur="if(this.value==''){toggleField(this,this.previousSibling);}">
<input type="submit" value="Submit">
</form>
</body>
</html>
당신은 정말 할 수 없습니다. 드롭 다운과 텍스트 상자가 모두 있어야하며 양식을 선택하거나 채우도록해야합니다. 자바 스크립트가 없으면 드롭 다운 또는 텍스트 입력을 선택하는 별도의 라디오 버튼 세트를 만들 수 있지만 이것은 나에게 지저분하게 보입니다. 일부 자바 스크립트를 사용하면 선택하는 항목에 따라 하나 또는 다른 옵션을 비활성화하도록 전환 할 수 있습니다. 예를 들어 드롭 다운에 텍스트 필드를 트리거하는 '기타'옵션이 있습니다.
jQuery 솔루션!
데모 : http://jsfiddle.net/69wP6/2/
아래의 또 다른 데모 (업데이트 됨!)
일부 고정 옵션이 있고 다른 옵션을 편집 할 수 있기를 원할 때 비슷한 것이 필요했습니다! 이 경우 선택 옵션과 겹치는 숨겨진 입력을 만들고 편집 가능하며 jQuery를 사용하여 모든 것이 원활하게 작동하도록했습니다.
나는 여러분 모두와 바이올린을 공유하고 있습니다!
HTML
<div id="billdesc">
<select id="test">
<option class="non" value="option1">Option1</option>
<option class="non" value="option2">Option2</option>
<option class="editable" value="other">Other</option>
</select>
<input class="editOption" style="display:none;"></input>
</div>
CSS
body{
background: blue;
}
#billdesc{
padding-top: 50px;
}
#test{
width: 100%;
height: 30px;
}
option {
height: 30px;
line-height: 30px;
}
.editOption{
width: 90%;
height: 24px;
position: relative;
top: -30px
}
jQuery
var initialText = $('.editable').val();
$('.editOption').val(initialText);
$('#test').change(function(){
var selected = $('option:selected', this).attr('class');
var optionText = $('.editable').text();
if(selected == "editable"){
$('.editOption').show();
$('.editOption').keyup(function(){
var editText = $('.editOption').val();
$('.editable').val(editText);
$('.editable').html(editText);
});
}else{
$('.editOption').hide();
}
});
Edit : Added some simple touches design wise, so people can clearly see where the input ends!
JS Fiddle : http://jsfiddle.net/69wP6/4/
If the datalist option doesn't fulfill your requirements, take a look to the Select2 library and the "Dynamic option creation"
$(".js-example-tags").select2({
tags: true
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control js-example-tags">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>Using one of the above solutions ( @mickmackusa ), I made a working prototype in React 16.8+ using Hooks.
https://codesandbox.io/s/heuristic-dewdney-0h2y2
I hope it helps someone.
참고URL : https://stackoverflow.com/questions/5650457/html-select-form-with-option-to-enter-custom-value
'developer tip' 카테고리의 다른 글
| 글꼴에 대한 Font-Awesome 오류 404 (0) | 2020.11.19 |
|---|---|
| PL / pgSQL을 사용하여 PostgreSQL에서 여러 필드를 레코드로 반환 (0) | 2020.11.19 |
| Python ElementTree를 문자열로 변환 (0) | 2020.11.18 |
| 활동과 조각의 차이점은 무엇입니까? (0) | 2020.11.18 |
| Java 9에서 압축 문자열과 압축 문자열의 차이점 (0) | 2020.11.18 |