기본적으로 HTML 선택 비활성화 옵션을 표시하는 방법은 무엇입니까?


139

나는 HTML과 PHP를 처음 사용하고 mysql 테이블에서 드롭 다운 메뉴를 달성하고 하드 코딩하고 싶습니다. 내 페이지에 여러 개의 선택이 있는데 그 중 하나는

<select name="tagging">
    <option value="">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

문제는 이제 사용자가 자신의 태그로 "태그 선택"을 선택할 수 있지만 사용 가능한 세 가지 중에서 선택하도록 제공하고 싶습니다. 나는 비활성화를 사용했다.

<select name="tagging">
    <option value="" disabled="disabled">Choose Tagging</option>
    <option value="Option A">Option A</option>
    <option value="Option B">Option B</option>
    <option value="Option C">Option C</option>
</select>

그러나 이제 "옵션 A"가 기본 옵션이되었습니다. 그래서 기본적으로 "태그 선택"을 설정하고 선택에서 비활성화하고 싶습니다. 이 작업을 수행하는 방법입니까? Mysql에서 데이터를 가져올 다른 select를 사용하여 동일한 작업을 수행해야합니다. 모든 제안은 감사 할 것입니다.


첫 번째 옵션을 비활성화하려면 select에 클릭 이벤트를 추가하십시오.
David Blacksmith

구문 오류를 수정해야합니다. value = ""disabled is disabled = "disabled"+ 홀수 닫기 </ select> 태그
Evgeniy

@Evgeniy 죄송 내 코드의 다른 부분에 속하는 </ 선택> 그
앵킷 샤르마

@AnkitSharma 코드를 수정했습니다. </ select> <select> <option> ... <option> </ select>
Evgeniy

@Evgeniy thanx ..... </ select>가 실수로 코드에서 복사되었습니다.
Ankit Sharma

답변:


291

사용하다

<option selected="true" disabled="disabled">Choose Tagging</option>    

42
true또는 disabled값 을 넣을 필요는 없습니다 . 당신은 수행함으로써 얻을 수 있습니다<option selected disabled>Choose Tagging</option>
Sam Eaton

18
@ SamEaton, 그것은 단지 유효한 XHTML 구문을 따르도록 코드를 만듭니다 .HTML5에서는 무시할 수 있습니다.
Cris

1
필요한 경우 value = ""를 설정해야 드롭 다운에서 선택할 수있는 오류가 발생합니다. 그렇지 않으면 아무 것도 선택하지 않아도 빈 값이 전달됩니다. <option selected="true" disabled="disabled" value="">Choose Tagging</option>
user34612


10

나는 당신이 옵션을 비활성화하는 방법을 묻는다는 것을 알고 있지만 최종 사용자의 시각적 결과는이 솔루션과 동일하지만 리소스 요구는 다소 적습니다.

다음과 같이 optgroup 태그를 사용하십시오 .

<select name="tagging">
    <optgroup label="Choose Tagging">
        <option value="Option A">Option A</option>
        <option value="Option B">Option B</option>
        <option value="Option C">Option C</option>
    </optgroup>
</select>

3
작동하지 않습니다. OP는 기본적으로 선택되어 있어야합니다. jsfiddle.net/tomsihap/5xm7grnb
tomsihap

10

전자 + 반응 두 가지 첫 번째 옵션은 다음과 같습니다.

<option hidden="true>Choose Tagging</option>
<option disabled="disabled" default="true">Choose Tagging</option>

닫을 때 처음으로 표시 목록이 열릴 때 처음으로 표시


8

사용하십시오 hidden.

<select>
   <option hidden>Choose</option>
   <option>Item 1</option>
   <option>Item 2</option>
</select>

이 설정은 해제되지 않지만 기본적으로 표시되는 동안 옵션에서 숨길 수 있습니다.


6

첫 번째 옵션을 비워 두려는 사람들을위한 또 다른 SELECT 태그 솔루션.

<label>Unreal :</label>
<select name="unreal">
   <option style="display:none"></option>
   <option>Money</option>
   <option>Country</option>
   <option>God</option>
</select>



3

이 기술을 사용하여 비활성화 할 수 있습니다.

<select class="form-control" name="option_select">
  <option selected="true" disabled="disabled">Select option </option>
  <option value="Option A">Option A</option>
  <option value="Option B">Option B</option>
  <option value="Option C">Option C</option>
</select>

1

jQuery를 사용하여 select 요소를 채우는 경우 다음을 사용할 수 있습니다.

html

<select id="tagging"></select>

js

array_of_options = ['Choose Tagging', 'Option A', 'Option B', 'Option C']

$.each(array_of_options, function(i, item) {
    if(i==0) { sel_op = 'selected'; dis_op = 'disabled'; } else { sel_op = ''; dis_op = ''; }
    $('<option ' + sel_op + ' ' + dis_op + '/>').val(item).html(item).appendTo('#tagging');
  })

이를 통해 사용자는 첫 번째 옵션을 비활성화 된 제목 ( '태그 선택')으로보고 다른 모든 옵션을 선택할 수 있습니다.

여기에 이미지 설명을 입력하십시오


0
            <select name="dept" id="dept">
                <option value =''disabled selected>Select Department</option>
                <option value="Computer">Computer</option>
                <option value="electronics">Electronics</option>
                <option value="aidt">AIDT</option>
                <option value="civil">Civil</option>
            </select>

"선택됨"을 사용하여 옵션을 선택하십시오. 감사


이 지침은 이미 여기이 질문에 게시 된 : stackoverflow.com/a/42997841/2943403 당신의 대답은 페이지에 새로운 가치를 추가하지 만 페이지 팽창에 기여한다.
mickmackusa

-1

다음과 같이 기본적으로 선택되는 옵션을 설정할 수 있습니다.

<option value="" selected>Choose Tagging</option>

클릭 이벤트를 관찰하고 다른 옵션을 선택한 후 첫 번째 옵션을 비활성화하려면 javascript 및 JQuery를 사용하는 것이 좋습니다. 먼저 요소에 다음과 같은 ID를 지정하십시오.

<select id="option_select" name="tagging">

옵션은 id :

<option value="" id="initial">Choose Tagging</option>

그때:

<script type="text/javascript">

$('option_select').observe(click, handleClickFunction);

그런 다음 함수를 작성하십시오.

function handleClickFunction () {

if ($('option_select').value !== "option_select") 
{
   $('initial').disabled=true; }
}

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.