html - check - 국가선택 select




HTML<select> 요소의 기본값을 어떻게 설정할 수 있습니까? (14)

각도 1로 선택을 사용하는 경우 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>

아래의 <select> 요소에 설정된 "value" 속성을 추가하면 기본적으로 선택한 "value" 가 포함 된 <option> 이 발생합니다.

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

그러나 이것은 예상했던대로 작동하지 않았습니다. 어떤 <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 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>

나는 단순히 첫 번째 선택 옵션 값을 기본값으로 만들고 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>

나는이 질문을 보았지만, 받아 들여지고 높은 upvoted 대답은 나를 위해 작동하지 않았다. React를 사용하는 경우 선택한 설정이 작동하지 않습니다.

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

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

React 페이지에서 이유 대해 자세히 읽어보십시오.


다른 예시; 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);

당신이 사용할 수있는:

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

대신에,

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

둘 다 똑같이 맞습니다.


반응이있는 경우 select 태그에서 value 대신 attribute로 defaultValue 를 사용할 수 있습니다.


의 대답에 대한 개선. 또한 '여기에서 선택'요소를 숨김으로써 드롭 다운 목록의 시각적보기를 향상시킬 수 있습니다.

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


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

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


이게 내가 한거야 ...

<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> 
    3 
  </option> 
  <option> 
    4 
  </option> 
  <option> 
    5 
  </option> 
</select> 


특정 요소에 "selected"특성을 넣고 요소를 선택하기 만하면됩니다.

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

   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>


<select> 의 문제점은 현재 렌더링 된 상태와 때때로 연결이 끊어지고 옵션 목록에서 변경된 것이 없으면 변경 값이 반환되지 않는다는 것입니다. 목록에서 첫 번째 옵션을 선택할 때 문제가 될 수 있습니다. 다음 코드는 첫 번째 옵션을 처음 선택하면 가져올 수 있지만 onchange="changeFontSize(this)" 는 자체에 의해 선택되지 않습니다. 위에서 설명한 메소드는 dummy 옵션을 사용하여 사용자가 빈 값으로 목록을 시작하는 것과 같이 실제 첫 번째 값을 가져 오는 변경 값을 작성하도록합니다. 참고 : 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>




html-select