IT박스

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

itboxs 2020. 8. 3. 08:37
반응형

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


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와 동일한 작업을 수행해야합니다. 모든 제안은 감사 할 것입니다.


사용하다

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

에서 HTML5, 비활성화 된 옵션을 선택합니다 :

<option selected disabled>Choose Tagging</option>

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

다음과 같이 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>

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

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

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


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

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


사용하십시오 hidden.

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

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


 selected disabled="true"

이것을 사용하십시오. 새로운 브라우저에서 작동합니다


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

<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>

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');
  })

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

enter image description here


You can set which option is selected by default like this:

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

I would suggest using javascript and JQuery to observe for click event and disable the first option after another has been selected: First, give the element an ID like so:

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

and the option an id :

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

then:

<script type="text/javascript">

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

Then you just create the function:

function handleClickFunction () {

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


            <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>

use "SELECTED" which option you want to select by defult. thanks

참고URL : https://stackoverflow.com/questions/22033922/how-to-show-disable-html-select-option-in-by-default

반응형