사용자가 맞춤 텍스트 값을 입력하거나 드롭 다운에서 선택할 수있는 입력 필드를 갖고 싶습니다. 일반인 <select>은 드롭 다운 옵션 만 제공합니다.
<select>사용자 정의 값을 수락하려면 어떻게 해야합니까? 예를 들어 : 포드?
<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는이 기능에 필요한 수준으로 지원 됩니다. 자세한 브라우저 지원 은 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();
}
});
편집 : 사람들이 입력이 끝나는 곳을 명확하게 볼 수 있도록 디자인 현명한 몇 가지 간단한 터치를 추가했습니다!
JS 바이올린 : http://jsfiddle.net/69wP6/4/
답변
당신은 정말 할 수 없습니다. 드롭 다운과 텍스트 상자가 모두 있어야하며 양식을 선택하거나 채우도록해야합니다. 자바 스크립트가 없으면 드롭 다운 또는 텍스트 입력을 선택하는 별도의 라디오 버튼 세트를 만들 수 있지만 이것은 나에게 지저분하게 보입니다. 일부 자바 스크립트를 사용하면 선택하는 항목에 따라 하나 또는 다른 옵션을 비활성화 할 수 있습니다. 예를 들어 드롭 다운에 텍스트 필드를 트리거하는 ‘기타’옵션이 있습니다.
답변
데이터 목록 옵션이 요구 사항을 충족하지 않는 경우 Select2 라이브러리 및 ” 동적 옵션 생성 “을 살펴보십시오.
$(".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>답변
위의 솔루션 중 하나 (@mickmackusa)를 사용하여 Hooks를 사용하여 React 16.8+에서 작동하는 프로토 타입을 만들었습니다.
https://codesandbox.io/s/heuristic-dewdney-0h2y2
누군가에게 도움이되기를 바랍니다.
답변
