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> 

මට මෙම ප්‍රශ්නය හමු විය, නමුත් පිළිගත් හා ඉහළ නංවන ලද පිළිතුර මට ප්‍රයෝජනවත් නොවීය. ඔබ ප්‍රතික්‍රියා භාවිතා කරන්නේ නම්, සැකසුම selectedක්‍රියා නොකරයි.

<select>පහත දැක්වෙන පරිදි සෘජුවම ටැගයේ අගය සැකසිය යුතුය :

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

ප්‍රතික්‍රියා පිටුවේ මෙහි හේතුව ගැන වැඩිදුර කියවන්න .

ඔබට එය මේ ආකාරයෙන් කළ හැකිය:

<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 සින්ටැක්ස් වන අතර සමහර කතුවරුන් මේ ගැන සතුටු විය හැකිය. එය වඩා පසුගාමී අනුකූල වේ. මට මේ පිළිබඳව දැඩි හැඟීමක් නැත, නමුත් ඉහත සඳහන් තර්ක ඔබේ අවශ්‍යතා නම් ඔබ සම්පූර්ණ වාක්‍ය ඛණ්ඩය අනුගමනය කළ යුතුය.

තවත් උදාහරණයක්; තෝරාගත් විකල්පයක් සැකසීමට ජාවාස්ක්‍රිප්ට් භාවිතා කිරීම.

(ඔබට මෙම උදාහරණය භාවිතා කර අගයන් පෙළක් පහළට වැටෙන අංගයක් බවට පත් කළ හැකිය)

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

ඔබ කෝණික 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>

විකල්පයන් උත්පාදනය කිරීම සඳහා මම මෙම 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 නිර්මාණය වී තිබේ නම් (මෙම කේතය පෝස්ට් කරන පෝරමයක් තුළ ඇත) එවිට කලින් තෝරාගත් අගය පෙරනිමියෙන් තෝරා ගනු ලැබේ.

ටැගයේ අගය ආරෝපණය අස්ථානගත වී ඇත, එබැවින් ඔබ තෝරාගත් පරිදි එය නොපෙන්වයි. පෙරනිමියෙන් පළමු විකල්පය පතන පිටුව පැටවීම පෙන්වයි, අගය ගුණාංගය ටැගය මත සකසා තිබේ නම් .... මගේ ගැටලුව මේ ආකාරයෙන් විසඳා ඇත

මෙම කේතය PHP සමඟ HTML තෝරාගත් අංගයේ පෙරනිමි අගය සකසයි.

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

මම පළමු තේරීමේ විකල්පය පෙරනිමියෙන් අගය කර 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>

ඔයාට පාවිච්චි කරන්න පුළුවන්:

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

වෙනුවට,

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

දෙකම සමානව නිවැරදි ය.

මම එය භාවිතා කරමි

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

තෝරාගත් = "තෝරාගත්" ලෙස සකසන්න, එහිදී විකල්ප අගය 3 වේ

කරුණාකර පහත උදාහරණය බලන්න

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

ගැටළුව <select>වන්නේ, එය සමහර විට දැනට ඉදිරිපත් කර ඇති දේ සමඟ විසන්ධි වී ඇති අතර විකල්ප ලැයිස්තුවේ යමක් වෙනස් වී ඇත්නම් මිස කිසිදු වෙනස් අගයක් ආපසු ලබා නොදේ. ලැයිස්තුවකින් පළමු විකල්පය තෝරා ගැනීමට උත්සාහ කිරීමේදී මෙය ගැටළුවක් විය හැකිය. පහත දැක්වෙන කේතයට පළමු වරට තෝරාගත් පළමු විකල්පය ලබා ගත හැකි නමුත් onchange="changeFontSize(this)"එය තනිවම සිදු නොවේ. හිස් අගයකින් ලැයිස්තුව ආරම්භ කිරීම වැනි සත්‍ය පළමු අගය ලබා ගැනීම සඳහා වෙනස් අගයක් ගැනීමට පරිශීලකයෙකුට බල කිරීම සඳහා ව්‍යාජ විකල්පයක් භාවිතා කරමින් ඉහත විස්තර කර ඇති ක්‍රම තිබේ. සටහන: ඔන්ක්ලික් මඟින් ශ්‍රිතය දෙවරක් අමතනු ඇත, පහත කේතය නොකියයි, නමුත් පළමු වරට ගැටළුව විසඳයි.

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

ස්වදේශීය ජාවාස්ක්‍රිප්ට් ස්නිපටය:

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>