Làm cách nào tôi có thể đặt giá trị mặc định cho phần tử <select> HTML?

Tôi nghĩ rằng việc thêm một "value"thuộc tính được đặt trên thành <select>phần bên dưới sẽ khiến mặc định <option>chứa thuộc tính được cung cấp của tôi "value"được chọn:

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

Tuy nhiên, điều này đã không làm việc như tôi mong đợi. Làm cách nào để đặt <option>phần tử được chọn theo mặc định?

Đặt selected="selected"cho tùy chọn bạn muốn làm mặc định.

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

Trong trường hợp bạn muốn có một văn bản mặc định là một loại giữ chỗ / gợi ý nhưng không được coi là một giá trị hợp lệ (một cái gì đó như "hoàn thành ở đây", "chọn quốc gia của bạn" ecc.), Bạn có thể làm một cái gì đó như thế này:

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

Ví dụ hoàn chỉnh:

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

Tôi đã gặp câu hỏi này, nhưng câu trả lời được chấp nhận và đánh giá cao đã không làm việc cho tôi. Hóa ra nếu bạn đang sử dụng React, thì cài đặt selectedkhông hoạt động.

Thay vào đó, bạn phải đặt một giá trị trong <select>thẻ trực tiếp như hiển thị bên dưới:

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

Đọc thêm về lý do tại sao ở đây trên trang React .

Bạn có thể làm như thế này:

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

Cung cấp từ khóa "đã chọn" bên trong thẻ tùy chọn mà bạn muốn xuất hiện theo mặc định trong danh sách thả xuống của bạn.

Hoặc bạn cũng có thể cung cấp thuộc tính cho thẻ tùy chọn tức là

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

nếu bạn muốn sử dụng các giá trị từ Biểu mẫu và giữ cho nó động, hãy thử điều này với 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>

Tôi thích điều này:

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

'Chọn ở đây' biến mất sau khi một tùy chọn đã được chọn.

Một cải tiến cho câu trả lời của nobita . Ngoài ra, bạn có thể cải thiện chế độ xem trực quan của danh sách thả xuống, bằng cách ẩn phần tử 'Chọn tại đây'.

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

Cách tốt nhất theo ý kiến ​​của tôi:

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

Tại sao không bị tàn tật?

Khi bạn sử dụng thuộc tính bị vô hiệu hóa cùng với <button type="reset">Reset</button>giá trị sẽ không được đặt lại về chỗ giữ gốc. Thay vào đó, trình duyệt chọn tùy chọn không bị vô hiệu hóa đầu tiên có thể gây ra lỗi người dùng.

Giá trị trống mặc định

Mọi hình thức sản xuất đều có xác nhận, sau đó giá trị trống không phải là một vấn đề. Bằng cách này, chúng tôi có thể có trống không yêu cầu chọn.

Thuộc tính cú pháp XHTML

selected="selected"cú pháp là cách duy nhất để tương thích với cả XHTML và HTML 5. Đây là cú pháp XML chính xác và một số biên tập viên có thể hài lòng về điều này. Nó tương thích ngược hơn. Tôi không có cảm giác mạnh về điều này, nhưng nếu các đối số được đề cập ở trên là yêu cầu của bạn, bạn nên tuân theo cú pháp đầy đủ.

Một vi dụ khac; sử dụng JavaScript để đặt tùy chọn đã chọn.

(Bạn có thể sử dụng ví dụ này để lặp một mảng các giá trị thành một thành phần thả xuống)

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

Các chọn thuộc tính là một thuộc tính boolean.

Khi có mặt, nó chỉ định rằng một tùy chọn nên được chọn trước khi tải trang.

Tùy chọn được chọn trước sẽ được hiển thị đầu tiên trong danh sách thả xuống.

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

Nếu bạn đang phản ứng, bạn có thể sử dụng defaultValuelàm thuộc tính thay vì valuetrong thẻ chọn.

Nếu bạn đang sử dụng select với angular 1, thì bạn cần sử dụng ng-init, nếu không, tùy chọn thứ hai sẽ không được chọn vì mô hình ng sẽ ghi đè giá trị được chọn mặc định

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

Tôi đã sử dụng hàm php này để tạo các tùy chọn và chèn nó vào HTML của mình

<?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;
  }

?>

Và sau đó trong mã trang web của tôi, tôi sử dụng nó như dưới đây;

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

Nếu $ endmin được tạo từ biến _POST mỗi khi trang được tải (và mã này nằm trong một biểu mẫu có bài đăng) thì giá trị được chọn trước đó được chọn theo mặc định.

thuộc tính giá trị của thẻ bị thiếu, vì vậy nó không hiển thị như bạn muốn chọn. Theo mặc định, tùy chọn đầu tiên hiển thị khi tải trang thả xuống, nếu thuộc tính value được đặt trên thẻ .... Tôi đã giải quyết vấn đề của mình theo cách này

Mã này đặt giá trị mặc định cho phần tử chọn HTML bằng PHP.

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

Bạn có thể dùng:

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

thay vì,

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

cả hai đều đúng

Tôi chỉ đơn giản là làm cho giá trị tùy chọn chọn đầu tiên trở thành mặc định và chỉ ẩn giá trị đó trong danh sách thả xuống với tính năng "ẩn" mới của HTML5. Như thế này:

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

Bản thân tôi sử dụng nó

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

Bạn chỉ cần đặt thuộc tính "được chọn" trên một tùy chọn cụ thể thay vì trực tiếp để chọn thành phần.

Đây là đoạn trích cho cùng và nhiều ví dụ làm việc với các giá trị khác nhau.

   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>

Đặt đã chọn = "đã chọn" trong đó giá trị tùy chọn là 3

vui lòng xem ví dụ dưới đây

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

Vấn đề <select>là, đôi khi nó bị ngắt kết nối với trạng thái của những gì hiện được hiển thị và trừ khi có gì đó thay đổi trong danh sách tùy chọn, không có giá trị thay đổi nào được trả về. Đây có thể là một vấn đề khi cố gắng chọn tùy chọn đầu tiên từ danh sách. Đoạn mã sau có thể nhận tùy chọn đầu tiên được chọn lần đầu tiên, nhưng onchange="changeFontSize(this)"bản thân nó thì không. Có các phương pháp được mô tả ở trên bằng cách sử dụng tùy chọn giả để buộc người dùng thực hiện giá trị thay đổi để lấy giá trị đầu tiên thực tế, chẳng hạn như bắt đầu danh sách với giá trị trống. Lưu ý: onclick sẽ gọi hàm hai lần, đoạn mã sau thì không, nhưng giải quyết vấn đề lần đầu tiên.

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

Tôi sử dụng Angular và tôi đặt tùy chọn mặc định

Mẫu 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>

Kịch bản:

sselectedVal:any="test1";

Đây là cách tôi đã làm nó ...

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

Bạn có thể thử như thế này

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

Đoạn mã 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>

Đoạn mã JavaScript gốc:

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>