<복수 선택>-하나의 항목 만 선택하는 방법?


134

<SELECT multiple>여러 옵션 이있는 필드가 있고 동시에 하나의 옵션 만 선택하도록 허용하고 싶지만 사용자는 CTRL 키를 누르고 한 번에 더 많은 항목을 선택할 수 있습니다.

그것을하는 방법이 있습니까? ( 'multiple'을 제거하고 싶지 않습니다).


5
뭐? 왜? 자세한 설명이 필요합니다.
Dai

5
귀하의 선택에 여러 개를 사용하지 않습니까? :)
GordonM

5
@GordonM 그래 완전히 : 나는 여러 항목을 원했기 때문에 PI는 같은 오늘을 찾고 있었다 표시 합니다 (로 암시 multiple실제로 다수를 선택할 수없이 속성). 이 작업을 수행하는 속성이라는 사실을 잊었 size으므로 최고의 답변이 저 에게 도움이되었습니다.)
Luc

나는 개인적으로 4 개의 옵션이있는 다중 선택 필드를 가지고 있고 3 개의 옵션을 선택할 수 있기를 원하지만, 4 개의 옵션은 다른 3 개 (3 개의 옵션과 "none"과 충돌하기 때문에 선택 될 경우 단독이어야합니다. ")
RWolfe

답변:


281

여러 개를 선택하지 말고 크기를 다음과 같이 설정하십시오.

  <select name="user" id="userID" size="3">
    <option>John</option>
    <option>Paul</option>
    <option>Ringo</option>
    <option>George</option>
  </select>

실제 예 : https://jsfiddle.net/q2vo8nge/


size 속성에서 총 <option> 수를 프로그래밍 방식으로 계산할 수 있습니까?
MyName

@Natasha jquery :-)를 사용하여 size 필드의 값을 얻을 수 있습니다.
Vladimir verleg

크기 관련 정보 : 배치 select돌며 display: flex용기, 그리고 할 flex-grow: 1(가)에 select치료에 원인이됩니다 size="3"최소 높이로, 다음 컨테이너 내에서 가능한 최대 크기로 전체 선택의 높이를 웁니다. jsfiddle.net/z1gypahs
Torxed

25

사용자가 한 번에 하나의 옵션 만 선택해야하는 경우 "복수"를 제거하면됩니다. 일반적으로 선택하십시오.

  <select name="mySelect" size="3">
     <option>Foo</option>
     <option>Bar</option>
     <option>Foo Bar</option>
     <option>Bar Foo</option>
  </select>

깡깡이


9

multiple속성 을 제거하고 싶지 않습니까? 해당 속성의 전체 목적은 주어진 select요소 에서 여러 값을 선택할 수 있도록 브라우저에 지정하는 것 입니다. 단일 값만 선택해야하는 경우 속성을 제거하면 브라우저는 단일 선택 만 허용 함을 알게됩니다.

가지고있는 도구를 사용하십시오. 바로 그 도구입니다.


1
아 size 속성은 독립형으로도 작동합니다. 눈치 채지 못했다. 감사합니다
simPod

6
@simPod는 고객이 모든 옵션을 볼 필요가 있지만 그 중 하나만 선택할 수 있기 때문에 추론이 가능합니다. "실제"html을 작성한지 너무 오래 걸려서 대답을 구글 / 빙해야했습니다 ... 오, 며칠 동안 StackOverflow에 대해 감사합니다.
Richard B

1

기본적으로 하나의 옵션 만 원하지만 CTRL 키를 눌러 여러 옵션을 선택할 수 있습니다. 이것은 (복수의) SELECT 배수가 정확히 어떻게 동작 하는가입니다.

참조 : http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

질문을 명확하게 설명해 주시겠습니까?


Awww Marcos Placona 덕분에 지금 질문을 이해하고 있습니다. 초기 질문은 잘 표현되지 않았습니다.
Cogicero

개인적으로 여러 선택 옵션을 표시 할 때 사용자 경험에 "불공평하다"고 생각하지만 사용자는 하나만 선택할 수 있습니다.
Cogicero

1
상황에 따라 다름
simPod

1

Google 검색 후 여기에오고 내 엔드에서 물건을 변경합니다.

따라서이 샘플을 변경하면 런타임에 jquery와 함께 작동합니다.

$('select[name*="homepage_select"]').removeAttr('multiple')

http://jsfiddle.net/ajayendra2707/ejkxgy1p/5/


4
기본적으로 허용 된 답변이 수행하는 작업을 수행하지만 복잡한 방식으로 수행합니다. 런타임에 여러 속성을 제거하는 대신 HTML에서 직접 속성을 제거 할 수 있습니다. jsfiddle.net/3rkk6m9a
Harry

1
<select name="flowers" size="5" style="height:200px">
 <option value="1">Rose</option>
 <option value="2">Tulip</option>
</select>

이 간단한 솔루션을 사용하면 시각적으로 옵션 목록을 얻을 수 있지만 하나만 선택할 수 있습니다.


4
SO에 오신 것을 환영합니다. 자세한 설명을 추가하십시오
Andriy Ivaneyko

1

나는 select \ multi-select와 관련하여 몇 가지를 다루었 다.

<select name="mySelect" multiple="multiple">
    <option>Foo</option>
    <option>Bar</option>
    <option>Foo Bar</option>
    <option>Bar Foo</option>
</select>

0

늦게 대답했지만 다른 사람을 도울 수 있습니다. 여러 개의 속성을 제거하지 않고 어떻게 할 수 있습니까?

$('.myDropdown').chosen({
    //Here you can change the value of the maximum allowed options
    max_selected_options: 1
});

참고 : jQuery Chosen 플러그인이 필요합니다. harvesthq.github.io/chosen
smolo
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.