Bir HTML <select> öğesi için varsayılan değeri nasıl ayarlayabilirim?

Aşağıdaki öğeye "value"ayarlanan bir öznitelik eklemenin benim sağlanan içeren varsayılan olarak seçilmesine <select>neden olacağını düşündüm :<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>

Ancak, bu beklediğim gibi çalışmadı. Hangi <option>öğenin varsayılan olarak seçileceğini nasıl ayarlayabilirim ?

Set selected="selected"seçenek için varsayılan olmak istiyorum.

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

Bir tür yer tutucu / ipucu olarak varsayılan bir metne sahip olmak, ancak geçerli bir değer olarak düşünülmemek istiyorsanız ("burada tamamlayın" gibi bir şey, "ülkenizi seçin" vb.) Şöyle bir şey yapabilirsiniz:

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

Komple örnek:

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

Bu soruya rastladım, ancak kabul edilen ve son derece onaylanan cevap benim için işe yaramadı. React kullanıyorsanız, o zaman ayarın selectedişe yaramadığı ortaya çıkıyor.

Bunun yerine, <select>doğrudan aşağıda gösterildiği gibi etikette bir değer ayarlamanız gerekir :

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

Neden React (Tepki) sayfasında daha fazla bilgi bulabilirsiniz .

Bunu şöyle yapabilirsiniz:

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

Seçenek etiketinin içine, açılır listenizde varsayılan olarak görünmesini istediğiniz "seçili" anahtar kelimeyi girin.

Veya seçenek etiketine nitelik de sağlayabilirsiniz.

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

bir Formdaki değerleri kullanmak ve dinamik tutmak istiyorsanız php ile bunu deneyin

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

Bunu tercih ederim:

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

Bir seçenek seçildikten sonra 'Burada seç' kaybolur.

Nobita'nın cevabı için bir gelişme . Ayrıca, 'Burada seç' öğesini gizleyerek açılır listenin görsel görünümünü iyileştirebilirsiniz.

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

Bence en iyi yol:

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

Neden engelli değil?

Devre dışı bırakılmış özniteliği <button type="reset">Reset</button>değerle birlikte kullandığınızda , orijinal yer tutucusuna sıfırlanmaz. Bunun yerine tarayıcı, kullanıcı hatalarına neden olabilecek ilk önce devre dışı değil seçeneğini belirleyin.

Varsayılan boş değer

Her üretim formunun validasyonu vardır, o zaman boş değer bir sorun olmamalıdır. Bu şekilde boş gerekli olmayan seçim olabilir.

XHTML sözdizimi özellikleri

selected="selected"sözdizimi hem XHTML hem de HTML 5 ile uyumlu olmanın tek yoludur. Doğru XML sözdizimidir ve bazı editörler bundan memnun olabilir. Daha geriye dönük uyumludur. Bu konuda güçlü bir hisim yok, ancak yukarıda belirtilen argümanlar gereksinimlerinizse, tam sözdizimini takip etmelisiniz.

Başka bir örnek; JavaScript'i kullanarak seçili bir seçeneği belirleyin.

(Bu örneği, bir değer dizisini açılır bileşene dönüştürmek için kullanabilirsiniz)

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

Seçilen özelliği, bir mantıksal bir niteliktir.

Var olduğunda, sayfa yüklendiğinde bir seçeneğin önceden seçilmesi gerektiğini belirtir.

Önceden seçilen seçenek ilk önce açılır listede görüntülenir.

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

Eğer tepki veriyorsanız , seçim etiketinde defaultValuedeğil, özellik olarak kullanabilirsiniz value.

Açısal 1 ile select kullanıyorsanız ng-init kullanmanız gerekir, aksi takdirde ng-modeli varsayılan olarak seçilen değeri geçersiz kıldığından ikinci seçenek seçilmez.

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

Bu php işlevini seçenekleri oluşturmak ve HTML'ime eklemek için kullandım

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

?>

Ve sonra web sayfası kodumda aşağıdaki gibi kullanıyorum;

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

Sayfa her yüklendiğinde (ve bu kod gönderilerin yer aldığı bir formun içindeyse) $ endmin bir _POST değişkeninden oluşturulursa, varsayılan olarak önceden seçilen değer seçilir.

etiketinin değer özelliği eksik, bu nedenle istediğiniz gibi seçili görünmüyor. Varsayılan olarak ilk seçenek açılır sayfa yüklemesinde göster, değer özniteliği etikette ayarlanırsa .... Sorunumu bu şekilde çözdüm

Bu kod, PHP ile HTML seçme öğesi için varsayılan değeri ayarlar.

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

Kullanabilirsiniz:

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

onun yerine,

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

her ikisi de eşit derecede doğrudur.

Ben sadece ilk seçim seçeneği değeri varsayılan yapmak ve sadece HTML5 yeni "gizli" özelliği ile açılır menüde bu değeri gizlemek. Bunun gibi:

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

Kendim kullanıyorum

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

Öğe seçmek için doğrudan belirli bir seçeneğe "seçili" niteliğini koymanız yeterlidir.

İşte aynı ve farklı değerlere sahip birden fazla çalışma örneği için snippet.

   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>

Seçili değeri belirle = "seçili", burada seçenek değeri 3'tür

lütfen aşağıdaki örneğe bakın

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

Sorun <select>şu ki, bazen o anda görüntülenen durumun bağlantısı kesiliyor ve seçenek listesinde bir şey değişmedikçe, hiçbir değişiklik değeri döndürülmüyor. Bu, listeden ilk seçeneği seçmeye çalışırken bir sorun olabilir. Aşağıdaki kod ilk seçeneği ilk seferinde seçebilir, ancak onchange="changeFontSize(this)"kendi kendine olmaz. Yukarıda, kullanıcıyı listenin boş bir değerle başlatılması gibi gerçek ilk değeri almak için bir değişiklik değeri yapmaya zorlamak için sahte bir seçenek kullanılarak açıklanan yöntemler vardır. Not: onclick işlevi iki kez çağırır, aşağıdaki kod çağırmaz, ancak ilk kez sorunu çözer.

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

Açısal kullanıyorum ve varsayılan seçeneği

HTML Şablonu

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

Senaryo:

sselectedVal:any="test1";

Ben böyle yaptım ...

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

Bunu deneyebilirsin

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

HTML snippet'i:

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

Yerel JavaScript snippet'i:

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>