Ik dacht dat het toevoegen van een "value"attribuut ingesteld op het <select>element hieronder zou leiden tot de <option>met mijn opgegeven "value"om standaard te selecteren:
<select name="hall" id="hall" value="3">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>Antwoord 1, autoriteit 100%
Stel selected="selected"in voor de optie die je als standaard wilt hebben.
<option selected="selected">
3
</option>
Antwoord 2, autoriteit 35%
In het geval dat u een standaardtekst als een soort tijdelijke aanduiding/hint wilt hebben, maar niet als een geldige waarde beschouwt (zoiets als “hier invullen”, “selecteer uw land”, enz.), kunt u zoiets als dit doen:
p>
<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>Antwoord 3, autoriteit 10%
Compleet voorbeeld:
<select name="hall" id="hall">
<option>
1
</option>
<option>
2
</option>
<option selected>
3
</option>
<option>
4
</option>
<option>
5
</option>
</select> Antwoord 4, autoriteit 5%
Ik kwam deze vraag tegen, maar het geaccepteerde en zeer gewaardeerde antwoord werkte niet voor mij. Het blijkt dat als je React gebruikt, het instellen van selectedniet werkt.
In plaats daarvan moet je direct een waarde in de <select>-tag instellen, zoals hieronder weergegeven:
<select value="B">
<option value="A">Apple</option>
<option value="B">Banana</option>
<option value="C">Cranberry</option>
</select>
Lees meer over waarom hier op de Reageren-pagina.
Antwoord 5, autoriteit 3%
Je kunt het als volgt doen:
<select name="hall" id="hall">
<option> 1 </option>
<option> 2 </option>
<option selected> 3 </option>
<option> 4 </option>
<option> 5 </option>
</select>
Geef ‘geselecteerd’ zoekwoord op in de optietag, die u standaard in uw vervolgkeuzelijst wilt weergeven.
Of u kunt ook een attribuut opgeven voor de optietag, bijv.
<option selected="selected">3</option>
Antwoord 6, autoriteit 2%
als je de waarden van een formulier wilt gebruiken en het dynamisch wilt houden, probeer dit dan met 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>
Antwoord 7, autoriteit 2%
Ik geef de voorkeur aan dit:
<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>
‘Kies hier’ verdwijnt nadat een optie is geselecteerd.
Antwoord 8, autoriteit 2%
Volgens mij de beste manier:
<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>
Waarom niet uitgeschakeld?
Als u het uitgeschakelde kenmerk samen met <button type="reset">Reset</button>gebruikt, wordt de waarde niet teruggezet naar de oorspronkelijke tijdelijke aanduiding. In plaats daarvan kiest de browser de eerste niet-uitgeschakelde optie die gebruikersfouten kan veroorzaken.
Standaard lege waarde
Elk productieformulier heeft validatie, dan zou lege waarde geen probleem moeten zijn. Op deze manier kunnen we lege niet-verplichte selectie hebben.
XHTML-syntaxiskenmerken
selected="selected"syntaxis is de enige manier om compatibel te zijn met zowel XHTML als HTML 5. Het is de juiste XML-syntaxis en sommige editors zullen hier blij mee zijn. Het is meer achterwaarts compatibel. Als XML-compliance belangrijk is, moet u de volledige syntaxis volgen.
Antwoord 9
Een verbetering voor het antwoord van nobita. U kunt ook de visuele weergave van de vervolgkeuzelijst verbeteren door het element ‘Kies hier’ te verbergen.
<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>Antwoord 10
Nog een voorbeeld; JavaScript gebruiken om een geselecteerde optie in te stellen.
(Je zou dit voorbeeld kunnen gebruiken om een array van waarden for-loop te geven in een dropdown-component)
<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);
Antwoord 11
Het geselecteerdeattribuut is een boolean attribuut.
Indien aanwezig, specificeert het dat een optie vooraf moet worden geselecteerd wanneer de pagina wordt geladen.
De vooraf geselecteerde optie wordt als eerste weergegeven in de vervolgkeuzelijst.
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="vw">VW</option>
<option value="audi" selected>Audi</option>
</select>
Antwoord 12
Als je reageert, kun je defaultValueals attribuut gebruiken in plaats van valuein de select-tag.
Antwoord 13
Als u select met hoek 1 gebruikt, moet u ng-init gebruiken, anders wordt de tweede optie niet geselecteerd omdat ng-model de standaard geselecteerde waarde overschrijft
<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>
Antwoord 14
Ik zou gewoon de waarde van de eerste optie selecteren als standaard en die waarde verbergen in de vervolgkeuzelijst met de nieuwe “verborgen” functie van HTML5. Zoals dit:
<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>
Antwoord 15
Ik heb deze php-functie gebruikt om de opties te genereren en in mijn HTML in te voegen
<?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;
}
?>
En dan gebruik ik de code van mijn webpagina zoals hieronder;
<select id="endmin" name="endmin">
<?php echo numericoptions(0,55,5,'%02d',$endmin); ?>
</select>
Als $endmin wordt gemaakt op basis van een _POST-variabele elke keer dat de pagina wordt geladen (en deze code staat in een formulier dat wordt gepost), dan wordt standaard de eerder geselecteerde waarde geselecteerd.
Antwoord 16
waardekenmerk van tag ontbreekt, dus het wordt niet weergegeven zoals u wenste geselecteerd. Standaard wordt de eerste optie weergegeven bij het laden van de vervolgkeuzelijst, als het waardekenmerk is ingesteld op de tag…. Ik heb mijn probleem op deze manier opgelost
Antwoord 17
Deze code stelt de standaardwaarde in voor het HTML select-element met 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>
Antwoord 18
U kunt gebruiken:
<option value="someValue" selected>Some Value</option>
in plaats van,
<option value="someValue" selected = "selected">Some Value</option>
beide zijn even correct.
Antwoord 19
Stel selected=”selected” in waarbij de optiewaarde 3 is
zie onderstaand voorbeeld
<option selected="selected" value="3" >3</option>
Antwoord 20
Ik gebruik het zelf
<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>
Antwoord 21
U hoeft alleen maar het kenmerk “geselecteerd” op een bepaalde optie te plaatsen in plaats daarvan direct om het element te selecteren.
Hier is fragment voor hetzelfde en meerdere werkvoorbeeld met verschillende waarden.
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>Antwoord 22
Het probleem met <select>is dat het soms wordt losgekoppeld van de status van wat momenteel wordt weergegeven en tenzij er iets is gewijzigd in de optielijst, wordt er geen wijzigingswaarde geretourneerd. Dit kan een probleem zijn wanneer u probeert de eerste optie uit een lijst te selecteren. De volgende code kan de eerste optie krijgen die de eerste keer is geselecteerd, maar onchange="changeFontSize(this)"op zichzelf zou dat niet doen. Er zijn hierboven beschreven methoden die een dummy-optie gebruiken om een gebruiker te dwingen een wijzigingswaarde aan te brengen om de werkelijke eerste waarde op te halen, zoals het starten van de lijst met een lege waarde. Opmerking: onclick zou de functie twee keer aanroepen, de volgende code niet, maar lost het eerste probleem op.
<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>
Antwoord 23
Ik gebruik Angular en stel de standaardoptie in met
HTML-sjabloon
<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>
Script:
sselectedVal:any="test1";
Antwoord 24
HTML-fragment:
<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>
Native JavaScript-fragment:
document.querySelectorAll('[data-selected]').forEach(e => {
e.value = e.dataset.selected
});
Antwoord 25
Standaard geselecteerde waarde is Optie-4
<html:select property="status" value="OPTION_4" styleClass="form-control">
<html:option value="">Select</html:option>
<html:option value="OPTION_1" >Option-1</html:option>
<html:option value="OPTION_2" >Option-2</html:option>
<html:option value="OPTION_3" >Option-3</html:option>
<html:option value="OPTION_4" >Option-4</html:option>
<html:option value="OPTION_5" >Option-5</html:option>
</html:select>
Antwoord 26
Je hebt in elke optie een “id”-kenmerk nodig om deze oplossing te laten werken:
<script>
function select_option (id,value_selected) {
var select;
select = document.getElementById(id);
if (select == null) return 0;
var option;
option = select.options.namedItem(value_selected);
if (option == null) return 0;
option.selected = "selected";
return true;
}
</script>
<select name="hall" id="hall">
<option id="1">1</option>
<option id="2">2</option>
<option id="3">3</option>
<option id="4">4</option>
<option id="5">5</option>
</select>
<script>select_option ("hall","3");</script> Antwoord 27
Zo heb ik het gedaan…
<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>
Antwoord 28
Je kunt het zo proberen
<select name="hall" id="hall">
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
</select>
Antwoord 29
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>
Antwoord 30
De standaard instellen met PHP en JavaScript:
State: <select id="State">
<option value="" selected disabled hidden></option>
<option value="Andhra Pradesh">Andhra Pradesh</option>
<option value="Andaman and Nicobar Islands">Andaman and Nicobar Islands</option>
.
.
<option value="West Bengal">West Bengal</option>
</select>
<?php
if(isset($_GET['State'])){
echo <<<heredoc
<script>
document.getElementById("State").querySelector('option[value="{$_GET['State']}"]').selected = true;
</script>
heredoc;
}
?>