ฉันจะตั้งค่าเริ่มต้นสำหรับองค์ประกอบ <select> HTML ได้อย่างไร

ฉันคิดว่าการเพิ่มแอ"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>

ในกรณีที่คุณต้องการให้มีข้อความเริ่มต้นเป็นตัวยึดตำแหน่ง / คำใบ้ แต่ไม่ถือว่าเป็นค่าที่ถูกต้อง (เช่น "กรอกที่นี่", "เลือกประเทศของคุณ" ecc.) คุณสามารถทำสิ่งนี้ได้:

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

ทำไมไม่ปิดการใช้งาน?

เมื่อคุณใช้คุณลักษณะที่ปิดใช้งานพร้อมกับ<button type="reset">Reset</button>ค่าจะไม่ถูกรีเซ็ตเป็นตัวยึดตำแหน่งดั้งเดิม เบราว์เซอร์แทนเลือกตัวเลือกแรกที่ไม่ได้ปิดการใช้งานซึ่งอาจทำให้เกิดข้อผิดพลาดของผู้ใช้

ค่าเริ่มต้นที่ว่างเปล่า

ทุกรูปแบบการผลิตมีการตรวจสอบแล้วค่าที่ว่างเปล่าไม่ควรเป็นปัญหา ด้วยวิธีนี้เราอาจจะไม่ต้องเลือกว่างเปล่า

แอตทริบิวต์ของไวยากรณ์ 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> 

หากคุณอยู่ในปฏิกิริยาคุณสามารถใช้defaultValueเป็นคุณลักษณะแทนvalueในแท็กเลือก

หากคุณใช้ select กับ angular 1 คุณต้องใช้ ng-init ไม่เช่นนั้นตัวเลือกที่สองจะไม่ถูกเลือกเนื่องจาก ng-model จะแทนที่ค่า defaul ที่เลือก

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

หาก $ endmin สร้างขึ้นจากตัวแปร _POST ทุกครั้งที่โหลดหน้าเว็บ (และรหัสนี้อยู่ในรูปแบบที่โพสต์) ดังนั้นค่าที่เลือกไว้ก่อนหน้านี้จะถูกเลือกโดยค่าเริ่มต้น

แอตทริบิวต์ของแท็กค่าหายไปดังนั้นจึงไม่แสดงตามที่คุณต้องการ ตามค่าเริ่มต้นตัวเลือกแรกจะแสดงเมื่อโหลดหน้าเว็บแบบเลื่อนลงหากมีการตั้งค่าแอตทริบิวต์ในแท็ก .... ฉันแก้ปัญหาด้วยวิธีนี้แล้ว

รหัสนี้ตั้งค่าเริ่มต้นสำหรับองค์ประกอบการเลือก HTML ด้วย 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>

คุณสามารถใช้ได้:

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

คุณเพียงแค่ต้องใส่คุณสมบัติ "เลือก" ในตัวเลือกเฉพาะแทนโดยตรงเพื่อเลือกองค์ประกอบ

นี่คือตัวอย่างข้อมูลสำหรับตัวอย่างการทำงานที่เหมือนกันและหลายค่าที่แตกต่างกัน

   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>

Set selected = "selected" โดยที่ค่าตัวเลือกคือ 3

โปรดดูตัวอย่างด้านล่าง

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