मैं HTML <select> एलिमेंट के लिए डिफ़ॉल्ट मान कैसे सेट कर सकता हूं?

Question

मैंने सोचा था कि नीचे दिए गए तत्व "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>डिफ़ॉल्ट रूप से किस तत्व का चयन कर सकता हूं ?

Comments

वाह, यह सवाल बहुत उपयोगी है और यह सचमुच वायरल हो गया

— फाइनेंगलस

Answer 1

selected="selected"उस विकल्प के लिए सेट करें जिसे आप डिफ़ॉल्ट होना चाहते हैं।

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

Comments

<विकल्प मान = "3" चयनित = "चयनित"> 3 </ विकल्प> मूल्य को स्ट्रिंग के रूप में पारित किया जाएगा जब विकल्प 3 का चयन किया जाएगा।

— श्री राम

और <Select> के लिए आईडी विशेषता का उपयोग जारी रखें और <select> html तत्व के लिए मूल्य विशेषता का उपयोग करना अच्छा नहीं है।

— श्री राम

= "चयनित" भाग आवश्यक नहीं है। बस <विकल्प चयनित> अन्य उत्तरों में उल्लिखित है।

— माइंडजुइस 16

@MindJuice मैंने जो लिखा है वह वैध पॉलीग्लॉट HTML / XML है। किसी ब्राउज़र के लिए चयनित <> का उपयोग करना ठीक है, लेकिन हो सकता है कि दस्तावेज़ अन्य पार्सर्स द्वारा अस्वीकार कर दिया जाए। मुझे लगता है कि कभी-कभी वेब दस्तावेजों पर XPath / XSLT का उपयोग करने में सक्षम होना आसान है।

— बोरेलिड

यदि आप कोणीय का उपयोग कर रहे हैं, तो ध्यान दें कि ng-modelडिफ़ॉल्ट चयनित मान को ओवरराइड करता है (यहां तक ​​कि अपरिभाषित के रूप में यदि आपने बाध्य ऑब्जेक्ट सेट नहीं किया है)। मुझे यह समझने में थोड़ा समय लगा कि इसीलिए selected="selected"विकल्प का चयन नहीं किया गया था।

— मेटाकर्मीट

Answer 2

यदि आप एक प्रकार का प्लेसहोल्डर / हिंट के रूप में एक डिफ़ॉल्ट पाठ रखना चाहते हैं, लेकिन इसे एक वैध मान नहीं माना जाता है (कुछ ऐसा "पूर्ण यहाँ", "अपने राष्ट्र का चयन करें" 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>

Comments

मुझे लगता है कि यह वही है जो ज्यादातर लोग ढूंढ रहे हैं। अच्छा उत्तर।

— क्रिसिलिक

यह एक बाहरी jsfiddle था जहां सीएसएस को स्क्रीन की सीमा के साथ दिखाई देने की आवश्यकता नहीं थी। कुछ महीनों के बाद इसे एक इनलाइन कोड स्निपेट में संपादित किया गया और जिस व्यक्ति ने संपादित किया, उसने इसे उदाहरण में रखा। यदि आप वास्तव में आपको परेशान करते हैं तो आप इसे स्निपेट से संपादित और निकाल सकते हैं।

— नोबिता

एक बेहतर समाधान hiddenइसके बजाय विशेषता का उपयोग करना है। नीचे @ चोंग-लिप-फांग का जवाब देखें: stackoverflow.com/a/39358987/1192426

— इवान अकुलोव

<option value="" selected disabled hidden>Choose here</option>

बहुत बढ़िया जवाब!

— सोफी

Answer 3

पूरा उदाहरण:

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

Comments

चयनित = "चयनित" उपयोग की तुलना में सरल है।

— रॉड्रिगो

चयनित = "चयनित" सभी सिद्धांतों के लिए काम करना चाहिए। XHTML मूल्यों के बिना विशेषताओं को पसंद नहीं करता है।

— Ps2goat

@ रोड्रिगो क्या वाकई ऐसा लिखना मुश्किल है selected="selected"? मेरा मतलब है, आप क्या बचा रहे हैं? समय? आकार? यह नगण्य है और यदि यह कोड को अधिक "आज्ञाकारी" बनाता है, तो ऐसा क्यों नहीं कर रहा है ?

— xDaizu

@ DanielParejoMuñoz, ठीक है, यह नगण्य है। लेकिन अगर मेरा doctype html है, और xhtml नहीं है, तो किसी भी बाइट को बर्बाद क्यों करें?

— रॉड्रिगो

चयनित = "चयनित" एक त्रुटि की तरह दिखता है। कुछ महीनों में मैं शायद इसे चयनित = "3" में बदल दूंगा यह सोचकर कि इसका मतलब है कि आइटम 3 का चयन किया गया है। (और मेरा पेज तोड़ो)

— पॉल मैकार्थी

Answer 4

मैं इस सवाल पर आया था, लेकिन स्वीकार किए जाते हैं और अत्यधिक उत्कीर्ण जवाब मेरे लिए काम नहीं किया। यह पता चला है कि यदि आप रिएक्ट का उपयोग कर रहे हैं, तो सेटिंग selectedकाम नहीं करती है।

इसके बजाय आपको <select>सीधे टैग में एक मान सेट करना होगा जैसा कि नीचे दिखाया गया है:

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

यहाँ पढ़ें इसके बारे में क्यों प्रतिक्रिया पृष्ठ पर ।

Comments

आप टैग के valueलिए विशेषता का उपयोग करके ड्रॉप-डाउन सूची में एक पूर्व-चयनित विकल्प सेट कर सकते हैं , लेकिन यह W3C सत्यापनकर्ता में मान्य नहीं है। <select><select value="3">

— प्रेरित

ठीक है, लेकिन यह HTML नहीं है, यह JSX है, इसलिए इसे W3C नियमों का पालन करने की आवश्यकता नहीं है। अंत में React द्वारा उत्पन्न HTML हालांकि मान्य है।

— माइंडजुइस

एक आदर्श दुनिया में यह सवाल का एक टिप्पणी था, क्योंकि यह एक वैध जवाब नहीं है। लेकिन मुझे लगता है कि यह चारों ओर छड़ी करने के लिए पर्याप्त मूल्य है।

— जस्टस रोमिज़न

मुझे उपरोक्त सुझाव के लिए एक समान समाधान की आवश्यकता थी, लेकिन प्रतिक्रिया के बजाय JQuery के साथ। अगर यह भविष्य में किसी की मदद करता है:$("select").each(function(){ $(this).find('option[value="'+$(this).attr("value")+'"]').prop('selected', true); });

— CDK

यह उत्तर मान्य नहीं है, अंतर्निहित प्रश्न HTML नहीं रिएक्ट (JSX) के बारे में बात कर रहा है।

— आरोन सी

Answer 5

आप इसे इस तरह से कर सकते हैं:

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

Comments

बस स्पष्ट होने के लिए, w3 मानक है <विकल्प चयनित = "चयनित"> 3 </ विकल्प>

— htmldrum

@ जेआरएम मुझे लगता है कि आपके कहने का मतलब यह है कि यदि आपके दस्तावेज़ के लिए एक्सएचटीएमएल होना एक विशेषता से अधिक महत्वपूर्ण है तो उसका मूल्य होना चाहिए। HTML में "चयनित = चयनित" की कोई आवश्यकता नहीं है। W3.org/wiki/HTML/Elements/select , developer.mozilla.org/en-US/docs/HTML/Element/select पर उदाहरण कोई मान निर्दिष्ट नहीं करते हैं। ध्यान देने योग्य बात यह है कि selected="false"इसकी अनुमति नहीं है और selected=""इसे चयनित भी बनाता है। विकल्प नहीं चुनने का एकमात्र तरीका विशेषता को निकालना है। w3.org/html/wg/drafts/html/master/…

— जुआन मेंडेस

मुझे कभी समझ नहीं आया कि इस तरह के सवाल कभी कैसे उठते हैं। वे अभी तक सही उत्तर की तरह हैं .. 2 साल बाद लोल

— फिल

Answer 6

यदि आप प्रपत्र से मानों का उपयोग करना चाहते हैं और इसे 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>

Answer 7

यह मेरे लिए ज़्यादा प्रधान है:

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

एक विकल्प चुने जाने के बाद 'यहाँ चुनें' गायब हो जाता है।

Comments

मैंने यह कोशिश की, लेकिन "यहाँ चुनें" प्रदर्शित नहीं किया गया है। पहला विकल्प खाली है

— बोगदान मेट्स

आप कौन सा ब्राउज़र उपयोग कर रहे हैं?

— चोंग लिप फांग

मैं Google Chrome ब्राउज़र संस्करण का उपयोग कर रहा हूं 52.0.2743.116 m

— बोगडान मेट्स

मैं उस ब्राउज़र का भी उपयोग कर रहा हूं और किसी समस्या का अनुभव नहीं कर रहा हूं।

— चोंग लिप फांग

value=""आपको खाली मान प्राप्त करने के लिए जोड़ने पर विचार करें ।

— रयान वाल्टन

Answer 8

Nobita के उत्तर के लिए एक सुधार । इसके अलावा आप 'नीचे यहाँ चुनें' तत्व को छिपाकर ड्रॉप डाउन सूची के दृश्य को बेहतर बना सकते हैं।

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

Answer 9

मेरी राय में सबसे अच्छा तरीका:

<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 दोनों के साथ संगत होने का एकमात्र तरीका है। यह XML सिंटैक्स सही है और कुछ संपादक इस बारे में खुश हो सकते हैं। यह अधिक पिछड़ा संगत है। मुझे इस बारे में मजबूत भावना नहीं है, लेकिन यदि उपर्युक्त तर्क आपकी आवश्यकताएं हैं तो आपको पूर्ण वाक्यविन्यास का पालन करना चाहिए।

Comments

यह मेरे लिए पूरा विकल्प छुपाता है

— ADEL NAMANI

@ADELNAMANI क्या आप अपने कोड का लिंक प्रदान कर सकते हैं? मुझे लगता है कि आपकी समस्या मेरे उत्तर से संबंधित नहीं है।

— मीकल Mielec

Answer 10

एक और उदाहरण; चयनित विकल्प सेट करने के लिए जावास्क्रिप्ट का उपयोग करना।

(आप इस उदाहरण का उपयोग एक ड्रॉप डाउन घटक में मानों की एक सरणी को लूप के लिए कर सकते हैं)

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

Comments

कि el.selected = "selected";w3 मानक का अनुपालन नहीं होना चाहिए ?

— 7yl4r

@ 7yl4r नंबर selectedएक बूलियन प्रॉपर्टी है जिसे w3c द्वारा परिभाषित किया गया है - w3.org/TR/html401/interact/forms.html `17.6.1 पहले से चुने गए विकल्पों का चयन [CI] - जब सेट किया जाता है, तो यह बूलियन विशेषता बताता है कि यह विकल्प है पूर्व-चयनित.` उपयोग के बारे में अधिक जानकारी के लिए w3c स्कूलों को देखें - w3schools.com/jsref/prop_option_selected.asp

— सहयोगी

Answer 11

चयनित विशेषता एक बूलियन विशेषता है।

वर्तमान में, यह निर्दिष्ट करता है कि पृष्ठ लोड होने पर एक विकल्प पूर्व-चयनित होना चाहिए।

पहले से चयनित विकल्प को ड्रॉप-डाउन सूची में पहले प्रदर्शित किया जाएगा।

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

Answer 12

यदि आप प्रतिक्रिया में हैं, तो आप चुनिंदा टैग के defaultValueबजाय विशेषता के रूप में उपयोग कर सकते हैं value।

Answer 13

यदि आप कोणीय 1 के साथ चयन का उपयोग कर रहे हैं, तो आपको एनजी-इनिट का उपयोग करने की आवश्यकता है, अन्यथा, दूसरा विकल्प चयनित नहीं होगा, एनजी-मॉडल डिफॉल चयनित मान को ओवरराइड करता है

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

Answer 14

मैंने विकल्प तैयार करने के लिए इस 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>

अगर हर बार पेज लोड होने के बाद $ _min एक वैरिएबल से बनाया जाता है (और यह कोड एक फॉर्म के अंदर है जो पोस्ट करता है) तो पहले से चयनित मान डिफ़ॉल्ट रूप से चुना जाता है।

Answer 15

टैग की मूल्य विशेषता गायब है, इसलिए यह यू वांछित के रूप में नहीं दिखाया गया है। डिफ़ॉल्ट रूप से पहला विकल्प ड्रॉपडाउन पेज लोड पर दिखाता है, यदि मूल्य विशेषता टैग पर सेट है .... मुझे इस तरह से मेरी समस्या हल हो गई

Answer 16

यह कोड 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>

Answer 17

आप उपयोग कर सकते हैं:

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

के बजाय,

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

दोनों समान रूप से सही हैं।

Answer 18

मैं सिर्फ पहला चुनिंदा विकल्प मान को डिफ़ॉल्ट बनाऊंगा और उस मूल्य को 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>

Answer 19

मैं खुद इसका इस्तेमाल करता हूं

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

Answer 20

आपको केवल तत्व चुनने के लिए सीधे किसी विशेष विकल्प पर "चयनित" विशेषता डालने की आवश्यकता है।

विभिन्न मूल्यों के साथ एक ही और कई कार्य उदाहरण के लिए यहाँ स्निपेट है।

   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>

Answer 21

सेट करें चयनित = "चयनित" जहां विकल्प मान 3 है

कृपया नीचे दिए गए उदाहरण देखें

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

Comments

फ़ायरफ़ॉक्स पर, यह पेज रीलोड पर काम नहीं करेगा

— सेबस्टियन

मेरे सिस्टम में फ़ायरफ़ॉक्स पर इसका काम

— अकोबेर

Answer 22

के साथ समस्या <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>

Answer 23

मैं कोणीय का उपयोग करता हूं और मैं डिफ़ॉल्ट विकल्प को सेट करता हूं

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

Answer 24

मैंने इस तरह से इसे किया...

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

Comments

इस समाधान के लिए कुछ असंगति प्रतीत होती है। यदि तत्व का नाम "चयन" है, तो क्या $ _POST परिवर्तनीय कुंजी "चयन" नहीं होना चाहिए - "ड्रॉप_डाउन" कहां से आता है? इसके अलावा, यह मानते हुए कि यह एक त्रुटि थी, और यह वास्तव में एक मूल्य के लिए $ _POST ['चयन'] चर की जाँच कर रहा है, कोई भी गैर-खाली मान वापस आ जाएगा, और इस तरह सभी <विकल्प> आइटम "चयनित" चिह्नित होंगे। शायद मुझे इस उत्तर से अभिन्न कुछ याद आ रहा है?

— रयान

Answer 25

आप इस तरह की कोशिश कर सकते हैं

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

Answer 26

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

Answer 27

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>