다중 선택을 허용하지 않고 HTML로 목록 상자를 만드는 방법은 무엇입니까?

97

HTML에 대한 경험이 많지 않습니다. 간단한 목록 상자를 만들고 싶지만 요구 사항 중 하나는 다중 선택을 해제하는 것입니다. 목록 상자에 대한 대부분의 코드는 다음과 같습니다.

 <select name="sometext" multiple="multiple">
    <option>text1</option>
    <option>text2</option>
    <option>text3</option>
    <option>text4</option>
    <option>text5</option>
 </select>

그러나 이것은 다중 선택을 허용합니다.

여기 에서 유사한 질문이 제기되었지만 "최상의"답변이 반대 투표되었습니다. 그래서 나는 이것이 어떻게 할 수 있는지 잘 모르겠습니다. 도와주세요.

html listbox

— CodeBlue
소스

5

다른 신규 이민자들에게는 앞서 언급 한 웹 사이트를 피하십시오. SEO가 좋지만 그게 전부입니다. 나중에 배운 것을 미안하게 생각할 나쁜 습관과 습관으로 가득 차 있습니다. MDN (Mozilla)의 API (이 경우 developer.mozilla.org/en-US/docs/Web/HTML/Element/select)를 사용 합니다.

— Ben

3

@Steve 경고에 감사드립니다. "이것이 내가 직업이있는 이유이다"라는 그의 말도 거만 해졌다. 직업이 있으면 좋은 일입니다. 이것은 광고가 아닌 답변을위한 포럼입니다.

— CodeBlue 2013 년

170

크기 속성을 사용하십시오.

<select name="sometext" size="5">
  <option>text1</option>
  <option>text2</option>
  <option>text3</option>
  <option>text4</option>
  <option>text5</option>
</select>

명확히하기 위해 크기 속성을 추가해도 다중 선택이 제거되지 않았습니다.

multiple = "multiple"속성을 제거했기 때문에 단일 선택이 작동합니다.

size = "5"속성을 추가하는 것은 여전히 좋은 생각입니다. 이는 최소한 5 줄이 표시되어야 함을 의미합니다. 여기 에서 전체 참조를 확인 하세요.

— Aaroncatlin
소스

2

진실을 위해 찬성했습니다. 또한 질문이 이전에 게시되었을 때이 솔루션은 모든 브라우저에서 널리 지원되지 않았을 수 있습니다.

— aaroncatlin 2013-08-27

크기 속성이 설정된 경우 브라우저가 목록 상자로 렌더링하도록 요구하는 HTML 표준이 없기 때문에 아마도 반대 투표일 것입니다. 예, 현재 모든 주요 브라우저가 지원하지만 항상 그렇다는 보장은 없습니다. 그러나 현실적으로 이것은 많은 웹 사이트에있어 획기적인 변화가 될 것이며 어떤 브라우저도 그것을 바꿀 가능성이 없습니다.

— Elezar 2015

1

표준은 약간의 해석이 가능합니다. "선택 요소의 표시 크기는 요소의 크기 속성 값에 음이 아닌 정수를 구문 분석하는 규칙을 적용하고 성공적으로 구문 분석 한 결과입니다." 이것은 드롭 다운 또는 목록 상자로 표시되어야한다는 것을 구체적으로 명시하지 않지만 둘 이상의 요소를 표시하는 드롭 다운 컨트롤을 표시하기는 어렵습니다. ( html.spec.whatwg.org/#the-select-element )

— aaroncatlin

감사!! 그리고 이것은 분명히 역동적 일 수 있습니다. Js : D

— Jcc.Sanabria

56

multiple = "multiple"속성을 제거하고 원하는 요소 수에 SIZE = 6을 추가합니다.

이 사이트를 확인하는 것이 좋습니다

http://www.htmlcodetutorial.com/forms/_SELECT.html

— 꽃가루
소스

2

Asp.Net MVC의 경우

@Html.ListBox("parameterName", ViewBag.ParameterValueList as MultiSelectList, 
 new { 
 @class = "chosen-select form-control"
 })

또는

  @Html.ListBoxFor(model => model.parameterName,
  ViewBag.ParameterValueList as MultiSelectList,
   new{
       data_placeholder = "Select Options ",
       @class = "chosen-select form-control"
   })

— 데 샤니 타라 카
소스