사용자 정의 값을 입력하는 옵션이있는 HTML 선택 양식

104

사용자가 맞춤 텍스트 값을 입력하거나 드롭 다운에서 선택할 수있는 입력 필드를 갖고 싶습니다. 일반인 <select>은 드롭 다운 옵션 만 제공합니다.

<select>사용자 정의 값을 수락하려면 어떻게 해야합니까? 예를 들어 : 포드?

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
html  forms 
— Ib33X
소스
자바 스크립트를 사용하여 선택 항목에 동적으로 옵션을 추가 할 수 있지만이 정보를 사용하면 정말 고통 스러울 것입니다.
— David
내 웹 사이트 finnmglas.com/contact 에서 사용자 지정 값에 대한 옵션을 추가하지 않았지만 누군가 사용자 지정 값으로 저에게 연락했습니다. 정말 이상합니다
— finnmglas

답변:

249

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>
스 니펫 확장

— 드미트리
소스
3
이 기능은 약 50 %의 브라우저에서만 지원됩니다. 최신 파이어 폭스, 크롬 및 오페라 만이이를 지원합니다. IE, Safari 및 모바일 브라우저는 그렇지 않습니다. http://caniuse.com/
— markmarijnissen 2014 년
2
2016 년 중반 (2 년 이상 후)이며 대부분의 브라우저는 적어도 심각한 버그 없이는이를 완전히 지원하지 않습니다. 적어도 Safari / Safari iOS를 제외한 거의 모든 최신 버전에서 작동하지만 사용 사례가 제대로 작동하는지 테스트해야합니다. 여전히 최선의 답변입니다.
— 마이클 Gaskill
1
그것은 나를 위해 잘 작동합니다. 대부분의 경우 이전 브라우저를 지원할 필요가 없습니다. 사용자에게 확장 가능한 힌트를 제공하기 위해 입력 필드의 배경에 "아래쪽 화살표"이미지 만 추가했습니다. 코드 (실제 이미지 파일 필요) :<input type="text" list="cars" style="background:url('images/arrow_down.png') no-repeat right center">
— Eugene Kardash
4
나는 최신 버전의 IE, Firefox 및 Chrome에서 모두 정상적으로 작동하도록 테스트했습니다. 나는 이것이 많은 경우에이 일반적인 문제에 대한 아주 간단한 해결책이라고 생각합니다.
— kerl
3
나는 이것을 정말로 사용하고 싶었지만 기본값을 설정해야했다. 사용자는 드롭 다운에서 기본값 만 볼 수 있고 모든 옵션 (필터링되어 있기 때문에)을 볼 수 있습니다. 모든 옵션을보기 전에 입력 필드를 지우는 방법을 알아야합니다.
— Justin
26

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>

— Mickmackusa
소스
나는 그 피들을 다시 생각하고 싶다! Firefox의 마녀 버전은 지원되지 않았습니다! 기억 나지 않는 일부 버전으로 테스트했습니다! 명성!
— Alen Saqe 2014
내가 어떤 버전의 FF를 사용했는지 모르겠습니다. 방금 FF34.0을 살펴 보았고 지금 기능이 제공되므로 걱정할 필요가 없습니다. 그러나 기본 토글 옵션 "기타"는 지울 수 있습니다. 값을 편집하여 "기타"를 제거하면 드롭 메뉴가 직관적 인 선택 값을 제공하지 않습니다 (편집 기능에 액세스하기 위해). 나는 이것이 개인적인 취향에 달려 있다고 생각합니다. 필드를 편집 할 수있을 때 드롭 메뉴 화살표가 여전히 존재하기 때문에 사용자는 필드를 편집 할 수 있다는 것을 인식하지 못할 수 있습니다. 당신을 파헤 치지 않습니다. 약간의 피드백입니다. 내 스 니펫은 <form> 내부의 필드 이름 지정도 고려합니다.
— mickmackusa 2014
이 독창적이지만 해독 할 수없는 스크립트 + html의 최종 결과는 선택한 옵션 값 또는 입력 된 텍스트를 쿼리 문자열과 동일한 페이지의 GET에 첨부하는 것입니다. 누구든지 작업을 POST로 변환하는 방법을 알고 있으므로 PHP 파일에서 값을 가져와 거기에서 뭔가를 할 수 있습니까?
— Han
이 스크립트는 HTML 양식 제출에 따라 작동하도록 특정 의도로 작성했습니다. post 메소드를 form 태그의 속성으로 사용하고 있습니까? @Han 격리 된 스 니펫의 3v4l.org 링크를 만들면 빠르게 살펴보고 조언 할 수 있습니다.
— mickmackusa
1
소년 나는 바보 같은 느낌이 든다. 양식 태그에 메서드를 넣는 것을 잊었습니다. 아주 약간의 수정으로 게시 된대로 작동했습니다. <form name = "BrowserSurvey"method = "post"action = "/ gotThis.php"> ... 아름다운 스크립트, mickmackusa. 후속 힌트에 감사드립니다!
— Han
16

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/

— 알렌 사케
소스
11

당신은 정말 할 수 없습니다. 드롭 다운과 텍스트 상자가 모두 있어야하며 양식을 선택하거나 채우도록해야합니다. 자바 스크립트가 없으면 드롭 다운 또는 텍스트 입력을 선택하는 별도의 라디오 버튼 세트를 만들 수 있지만 이것은 나에게 지저분하게 보입니다. 일부 자바 스크립트를 사용하면 선택하는 항목에 따라 하나 또는 다른 옵션을 비활성화 할 수 있습니다. 예를 들어 드롭 다운에 텍스트 필드를 트리거하는 '기타'옵션이 있습니다.

— 샘
소스
9

데이터 목록 옵션이 요구 사항을 충족하지 않는 경우 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>
스 니펫 확장

— Sogeking
소스
0

위의 솔루션 중 하나 (@mickmackusa)를 사용하여 Hooks를 사용하여 React 16.8+에서 작동하는 프로토 타입을 만들었습니다.

https://codesandbox.io/s/heuristic-dewdney-0h2y2

누군가에게 도움이되기를 바랍니다.

— 다노
소스
영광입니다. 방금 기록을 확인했는데 이것은 제가 여기 Stack Overflow에서 만든 12 번째 게시물입니다. 백만년 전처럼 느껴집니다.
— mickmackusa
방금 데모 링크를 가지고 놀았는데 두 가지 유형의 필드 사이를 무기한 전환하는 효과를 잃은 것 같습니다.
— mickmackusa
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.