HTML <select> 요소의 기본값을 어떻게 설정합니까?

아래 요소 "value"에 속성 세트 를 추가하면 제공된 포함 내용이 기본적으로 선택됩니다.<select><option>"value"

<select name="hall" id="hall" value="3">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

그러나 이것은 예상대로 작동하지 않았습니다. <option>기본적으로 어떤 요소가 선택되도록 설정합니까?

selected="selected"기본 옵션으로 설정하십시오 .

<option selected="selected">
3
</option>

기본 텍스트를 일종의 자리 표시 자 / 힌트로 설정하고 있지만 유효한 값으로 간주되지 않는 경우 ( "여기에서 완료", "국가 선택"등) 다음과 같이 할 수 있습니다.

<select>
  <option value="" selected disabled hidden>Choose here</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

완전한 예 :

<select name="hall" id="hall"> 
  <option> 
    1 
  </option> 
  <option> 
    2 
  </option> 
  <option selected> 
    3 
  </option> 
  <option> 
    4 
  </option> 
  <option> 
    5 
  </option> 
</select> 

나는이 질문을 보았지만 인정되고 찬성 된 대답은 나에게 효과적이지 않았다. React를 사용하면 설정 selected이 작동하지 않는 것으로 나타났습니다 .

대신 <select>아래와 같이 태그에 직접 값을 설정해야 합니다.

<select value="B">
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

여기 React 페이지에서 이유 에 대해 자세히 알아보십시오 .

다음과 같이 할 수 있습니다 :

<select name="hall" id="hall">
    <option> 1 </option>
    <option> 2 </option>
    <option selected> 3 </option>
    <option> 4 </option>
    <option> 5 </option>
</select> 

옵션 태그 내에 "선택된"키워드를 제공하십시오. 드롭 다운 목록에 기본적으로 표시됩니다.

또는 옵션 태그에 속성을 제공 할 수도 있습니다. 즉

<option selected="selected">3</option>

폼의 값을 사용하고 동적으로 유지하려면 PHP로 시도하십시오.

<form action="../<SamePage>/" method="post">


<?php
    $selected = $_POST['select'];
?>

<select name="select" size="1">

  <option <?php if($selected == '1'){echo("selected");}?>>1</option>
  <option <?php if($selected == '2'){echo("selected");}?>>2</option>

</select>
</form>

나는 이것을 선호한다 :

<select>
   <option selected hidden>Choose here</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
   <option value="4">Four</option>
   <option value="5">Five</option>
</select>

옵션을 선택하면 '여기에서 선택'이 사라집니다.

노비타 의 답변 개선 . 또한 '여기에서 선택'요소를 숨겨 드롭 다운 목록의 시각적보기를 향상시킬 수 있습니다.

<select>
  <option selected disabled hidden>Choose here</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

내 의견으로는 가장 좋은 방법 :

<select>
   <option value="" selected="selected" hidden="hidden">Choose here</option>
   <option value="1">One</option>
   <option value="2">Two</option>
   <option value="3">Three</option>
   <option value="4">Four</option>
   <option value="5">Five</option>
</select>

왜 비활성화하지 않습니까?

disabled 속성을 <button type="reset">Reset</button>value 와 함께 사용하면 원래 자리 표시 자로 재설정되지 않습니다. 대신 브라우저는 사용자 실수를 유발할 수있는 먼저 비활성화되지 않은 옵션을 선택합니다.

기본 빈 값

모든 생산 양식에는 유효성 검사가 있으므로 빈 값은 문제가되지 않습니다. 이 방법으로 비어있는 필요하지 않을 수도 있습니다.

XHTML 구문 속성

selected="selected"구문은 XHTML 및 HTML 5와 호환되는 유일한 방법입니다. 올바른 XML 구문이며 일부 편집자는이 점에 만족할 수 있습니다. 더 이전 버전과 호환됩니다. 나는 이것에 대해 강한 느낌을 가지고 있지 않지만, 위의 주장이 당신의 요구 사항이라면 완전한 구문을 따라야합니다.

또 다른 예; JavaScript를 사용하여 선택한 옵션을 설정합니다.

(이 예제를 사용하여 값 배열을 드롭 다운 구성 요소에 반복 할 수 있습니다)

<select id="yourDropDownElementId"><select/>

// Get the select element
var select = document.getElementById("yourDropDownElementId");
// Create a new option element
var el = document.createElement("option");
// Add our value to the option
el.textContent = "Example Value";
el.value = "Example Value";
// Set the option to selected
el.selected = true;
// Add the new option element to the select element
select.appendChild(el);

선택 속성은 부울 속성입니다.

존재하는 경우 페이지가로드 될 때 옵션을 미리 선택하도록 지정합니다.

미리 선택된 옵션이 드롭 다운 목록에서 먼저 표시됩니다.

<select>
  <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="vw">VW</option>
 <option value="audi" selected>Audi</option> 
</select> 

반응 하는 경우 select 태그 defaultValue대신 속성으로 사용할 수 있습니다 value.

각도 1과 함께 select를 사용하는 경우 ng-init를 사용해야합니다. 그렇지 않으면 ng-model이 선택한 기본값을 무시하므로 두 번째 옵션을 선택하지 않습니다.

<select ng-model="sortVar" ng-init='sortVar="stargazers_count"'>
  <option value="name">Name</option>
  <option selected="selected" value="stargazers_count">Stars</option>
  <option value="language">Language</option>
</select>

이 PHP 함수를 사용하여 옵션을 생성하고 HTML에 삽입했습니다.

<?php
  # code to output a set of options for a numeric drop down list
  # parameters: (start, end, step, format, default)
  function numericoptions($start, $end, $step, $formatstring, $default)
  {
    $retstring = "";
    for($i = $start; $i <= $end; $i = $i + $step)
    {
      $retstring = $retstring . '<OPTION ';
      $retstring = $retstring . 'value="' . sprintf($formatstring,$i) . '"';
      if($default == $i)
      {
        $retstring = $retstring . ' selected="selected"';
      }
      $retstring = $retstring . '>' . sprintf($formatstring,$i) . '</OPTION> ';
    }

  return $retstring;
  }

?>

그런 다음 웹 페이지 코드에서 다음과 같이 사용합니다.

<select id="endmin" name="endmin">
  <?php echo numericoptions(0,55,5,'%02d',$endmin); ?>
</select>

페이지가로드 될 때마다 (그리고이 코드가 게시하는 양식 안에 있음) _POST 변수에서 $ endmin이 작성되면 이전에 선택한 값이 기본적으로 선택됩니다.

태그의 value 속성이 누락되었으므로 원하는 u 선택으로 표시되지 않습니다. 태그에 value 속성이 설정된 경우 기본적으로 첫 번째 옵션이 드롭 다운 페이지로드에 표시됩니다.이 방법으로 문제를 해결했습니다.

이 코드는 PHP를 사용하여 HTML select 요소의 기본값을 설정합니다.

<select name="hall" id="hall">
<?php
    $default = 3;
    $nr = 1;
    while($nr < 10){
        if($nr == $default){
            echo "<option selected=\"selected\">". $nr ."</option>";
        }
        else{
            echo "<option>". $nr ."</option>";
        }
        $nr++;
    }
?>
</select>

당신이 사용할 수있는:

<option value="someValue" selected>Some Value</option>

대신에,

<option value="someValue" selected = "selected">Some Value</option>

둘 다 똑같이 맞습니다.

첫 번째 선택 옵션 값을 기본값으로 설정하고 HTML5의 새로운 "숨겨진"기능을 사용하여 드롭 다운에서 해당 값을 숨 깁니다. 이처럼 :

   <select name="" id="">
     <option hidden value="default">Select An Option</option>
     <option value="1">One</option>
     <option value="2">Two</option>
     <option value="3">Three</option>
     <option value="4">Four</option>
   </select>

내가 직접 사용

<select selected=''>
    <option value=''></option>
    <option value='1'>ccc</option>
    <option value='2'>xxx</option>
    <option value='3'>zzz</option>
    <option value='4'>aaa</option>
    <option value='5'>qqq</option>
    <option value='6'>wwww</option>
</select>

특정 옵션에 "selected"속성을 넣어야하며, 대신 element를 선택하십시오.

다음은 다른 값을 가진 동일하고 여러 작업 예제에 대한 스 니펫입니다.

   Select Option 3 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option selected="selected">3</option>
    <option>4</option>
    <option>5</option>
   </select>
   
   <br/>
   <br/>
   <br/>
   Select Option 5 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option selected="selected">5</option>
   </select>
   
    <br/>
   <br/>
   <br/>
   Select Option 2 :- 
   <select name="hall" id="hall">
    <option>1</option>
    <option selected="selected">2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
   </select>

옵션 값이 3 인 selected = "selected"로 설정

아래 예를 참조하십시오

<option selected="selected" value="3" >3</option>

문제 <select>는 때로는 현재 렌더링 된 상태로 연결이 끊어지고 옵션 목록에서 변경 사항이 없으면 변경 값이 반환되지 않는다는 것입니다. 목록에서 첫 번째 옵션을 선택하려고 할 때 문제가 될 수 있습니다. 다음 코드는 첫 번째 옵션을 처음으로 선택할 수 있지만 onchange="changeFontSize(this)"자체적으로는 그렇지 않습니다. 더미 옵션을 사용하여 사용자가 값을 변경하여 실제 첫 번째 값을 가져 오도록 강제하는 위에서 설명한 방법이 있습니다 (예 : 빈 값으로 목록 시작). 참고 : onclick은 함수를 두 번 호출하지만 다음 코드는 그렇지 않지만 처음 문제를 해결합니다.

<label>Font Size</label>
<select name="fontSize" id="fontSize" onfocus="changeFontSize(this)" onchange="changeFontSize(this)">           
    <option value="small">Small</option>
    <option value="medium">Medium</option>
    <option value="large">Large</option>
    <option value="extraLarge">Extra large</option>
</select>

<script>
function changeFontSize(x){
    body=document.getElementById('body');
    if (x.value=="extraLarge") {
        body.style.fontSize="25px";
    } else {
        body.style.fontSize=x.value;
    }
}
</script>

나는 Angular를 사용하고 기본 옵션을 다음과 같이 설정합니다.

HTML 템플릿

<select #selectConnection [(ngModel)]="selectedVal" class="form-control  col-sm-6 "  max-width="100px"   title="Select" 
      data-size="10"> 
        <option  >test1</option>
        <option >test2</option>      
      </select>

스크립트:

sselectedVal:any="test1";

이것이 내가 한 방법입니다 ...

<form action="../<SamePage>/" method="post">

<?php
    if ( $_POST['drop_down'] == "")
    {
    $selected = "";
    }
    else
    {
    $selected = "selected";
    }
?>

<select name="select" size="1">

  <option value="1" <?php $selected ?>>One</option>
     ////////  OR  ////////
  <option value="2" $selected>Two</option>

</select>
</form>

당신은 이렇게 시도 할 수 있습니다

  <select name="hall" id="hall">
      <option>1</option>
      <option>2</option>
      <option selected="selected">3</option>
      <option>4</option>
      <option>5</option>
    </select>

HTML 스 니펫 :

<select data-selected="public" class="form-control" name="role">
    <option value="public">
        Pubblica
    </option>
    <option value="user">
        Utenti
    </option>
    <option value="admin">
        Admin
    </option>
</select>

기본 JavaScript 스 니펫 :

document.querySelectorAll('[data-selected]').forEach(e => {
   e.value = e.dataset.selected
});

Upstream System:
<select name=upstream id=upstream>
<option value="SYBASE">SYBASE ASE
<option value="SYBASE_IQ">SYBASE_IQ
<option value="SQLSERVER">SQLSERVER
</select>
<script>
var obj=document.getElementById("upstream");
for (var i=0;i<obj.length;i++){if(obj.options[i].value==="SYBASE_IQ")obj.selectedIndex=i;}
</script>