जावास्क्रिप्ट का उपयोग कर ड्रॉपडाउन सूची में चयनित मूल्य प्राप्त करें

Question

मुझे जावास्क्रिप्ट का उपयोग करके ड्रॉपडाउन सूची से चयनित मूल्य कैसे मिलेगा?

मैंने नीचे दिए तरीकों की कोशिश की, लेकिन वे सभी मूल्य के बजाय चयनित सूचकांक लौटाते हैं:

var as = document.form1.ddlViewBy.value;
var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Comments

DEMO freakyjolly.com/demo/getDropDownValue_JavaScript_jQuery.html

— कोड जासूस

Answer 1

यदि आपके पास एक ऐसा चुनिंदा तत्व है जो इस तरह दिखता है:

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2" selected="selected">test2</option>
  <option value="3">test3</option>
</select>

इस कोड को चलाना:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

बन strUserजाएगा 2। यदि आप वास्तव में चाहते हैं test2, तो यह करें:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].text;

कौन सा होगा strUserहोनाtest2

Comments

@ R11G, का उपयोग onchange:)

— AlexJaa

var strUser = e.options[e.selectedIndex].value;क्यों नहींvar strUser = e.value ?

— लाल मटर

@ TheRedPea- शायद क्योंकि जब यह उत्तर लिखा गया था तो एक मौका (हालांकि रिमोट) था कि नेटस्केप नेविगेटर के एक प्राचीन संस्करण को समायोजित करने की आवश्यकता थी, इसलिए एकल चयन के मूल्य तक पहुंचने के लिए समान रूप से प्राचीन पद्धति का उपयोग किया गया था। लेकिन मैं सिर्फ उसके बारे में अनुमान लगा रहा हूं। ;-)

— RobG

मैं इस तरह से इस्तेमाल किया:var e = document.getElementById("ddlViewBy").value;

— फतूर रोहिम

होना चाहिए e.target.options[e.target.selectedIndex].textपता नहीं है कि ऐसा क्यों की गलत यहाँ सभी प्रश्नों के उत्तर में ..

— Ozzie

Answer 2

सादा जावास्क्रिप्ट:

var e = document.getElementById("elementId");
var value = e.options[e.selectedIndex].value;
var text = e.options[e.selectedIndex].text;

jQuery:

$("#elementId :selected").text(); // The text content of the selected option
$("#elementId :selected").val(); // The value of the selected option

AngularJS : ( http://jsfiddle.net/qk5wwyct ):

// HTML
<select ng-model="selectItem" ng-options="item as item.text for item in items">
</select>
<p>Text: {{selectItem.text}}</p>
<p>Value: {{selectItem.value}}</p>

// JavaScript
$scope.items = [{
  value: 'item_1_id',
  text: 'Item 1'
}, {
  value: 'item_2_id',
  text: 'Item 2'
}];

Comments

मुझे कुछ गलत करना चाहिए क्योंकि जब मैं यह कोशिश करता हूं तो मुझे ड्रॉप डाउन में हर विकल्प का पाठ वापस मिल जाता है।

— केविन

इसने मेरे लिए अलग तरीके से काम किया। $ ("# ddlViewBy: चयनित")। वैल () चयनित के बिना नहीं

— रुवन्था

element.options[e.selectedIndex].valueहोना चाहिएelement.options[element.selectedIndex].value

— क्रिस्टोफर

फिर भी उपयोगी - विविधताओं / भाषा को लिखने के लिए धन्यवाद! अब अगर मुझे केवल ऑफिस जेएस एपीआई ड्रॉपडाउन के बराबर पता था ...

— सिंडी मेइस्टर

होना चाहिए e.target.options[e.target.selectedIndex].textपता नहीं है कि ऐसा क्यों की गलत यहाँ सभी प्रश्नों के उत्तर में ..

— Ozzie

Answer 3

var strUser = e.options[e.selectedIndex].value;

यह सही है और आपको इसका मूल्य देना चाहिए। क्या यह वह पाठ है जिसके बाद आप हैं?

var strUser = e.options[e.selectedIndex].text;

इसलिए आप शब्दावली पर स्पष्ट हैं:

<select>
    <option value="hello">Hello World</option>
</select>

इस विकल्प में है:

• सूचकांक = ०
• मान = नमस्ते
• पाठ = नमस्ते दुनिया

Comments

मुझे लगा कि जावास्क्रिप्ट में ".value" मेरे लिए मान लौटाएगी, लेकिन केवल ".xtxt" ही क्या होगा। asp.net रिटर्न में .SelectedValue के रूप में। दिए गए उदाहरण के लिए धन्यवाद!

— फायर हैंड

हां - विकल्प का मूल्य वही करें जो वह है। सरल - ऊपर के आदमी को अपनी प्रारंभिक अस्पष्टता के लिए और अधिक कोड लिखने की आवश्यकता है।

— एंड्रयू कोपर

होना चाहिए e.target.options[e.target.selectedIndex].textपता नहीं है कि ऐसा क्यों की गलत यहाँ सभी प्रश्नों के उत्तर में ..

— Ozzie

Answer 4

निम्नलिखित कोड जावास्क्रिप्ट का उपयोग करके इनपुट / चुनिंदा क्षेत्रों से मान प्राप्त करने / लगाने से संबंधित विभिन्न उदाहरण प्रदर्शित करता है।

स्रोत लिंक

कार्य जावास्क्रिप्ट और jQuery डेमो

 <select id="Ultra" onchange="run()">  <!--Call run() function-->
     <option value="0">Select</option>
     <option value="8">text1</option>
     <option value="5">text2</option>
     <option value="4">text3</option>
</select><br><br>
TextBox1<br>
<input type="text" id="srt" placeholder="get value on option select"><br>
TextBox2<br>
<input type="text" id="rtt"  placeholder="Write Something !" onkeyup="up()">

निम्न स्क्रिप्ट चयनित विकल्प का मूल्य प्राप्त कर रहा है और इसे टेक्स्ट बॉक्स 1 में डाल रहा है

<script>
    function run() {
        document.getElementById("srt").value = document.getElementById("Ultra").value;
    }
</script>

निम्न स्क्रिप्ट को एक पाठ बॉक्स 2 से एक मान मिल रहा है और इसके मूल्य के साथ चेतावनी है

<script>
    function up() {
        //if (document.getElementById("srt").value != "") {
            var dop = document.getElementById("srt").value;
        //}
        alert(dop);
    }
</script>

निम्नलिखित स्क्रिप्ट एक फ़ंक्शन से एक फ़ंक्शन कह रही है

<script>
    function up() {
        var dop = document.getElementById("srt").value;
        pop(dop); // Calling function pop
    }

    function pop(val) {
        alert(val);
    }?
</script>

Comments

onchange=run(this.value)या (this.text)अधिक लाभकारी हो सकता है।

— बेरसी

Answer 5

var selectedValue = document.getElementById("ddlViewBy").value;

Comments

यह सबसे सरल उपाय है, कम से कम आधुनिक ब्राउज़रों के लिए। W3Schools भी देखें ।

— एरिक कोपामंस

Answer 6

यदि आप कभी भी इंटरनेट एक्सप्लोरर के लिए शुद्ध रूप से लिखे गए कोड को चलाते हैं, तो आप इसे देख सकते हैं:

var e = document.getElementById("ddlViewBy");
var strUser = e.options(e.selectedIndex).value;

फ़ायरफ़ॉक्स एट अल में ऊपर चलाना आपको एक 'फ़ंक्शन नहीं है' त्रुटि देगा, क्योंकि इंटरनेट एक्सप्लोरर आपको [] के बजाय उपयोग करने () के साथ दूर जाने की अनुमति देता है:

var e = document.getElementById("ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

चौकोर कोष्ठक का उपयोग करने का सही तरीका है।

Answer 7

<select id="Ultra" onchange="alert(this.value)"> 
 <option value="0">Select</option>
 <option value="8">text1</option>
 <option value="5">text2</option>
 <option value="4">text3</option>
</select>

जब आप तत्व के अंदर से पहुँच रहे हों तो कोई भी इनपुट / फॉर्म फील्ड "इस" कीवर्ड का उपयोग कर सकता है। यह डोम पेड़ में एक फार्म का पता लगाने और फिर फार्म के अंदर इस तत्व का पता लगाने की आवश्यकता को समाप्त करता है।

Comments

एक स्पष्टीकरण क्रम में होगा।

— पीटर मोर्टेंसन

Answer 8

शुरुआती लोगों के लिए आईडी विशेषता के बजाय NAME विशेषता के साथ चयन से मानों का उपयोग करना चाहते हैं। हम जानते हैं कि सभी फार्म तत्वों को नाम प्राप्त करने से पहले ही नामों की आवश्यकता होती है।

इसलिए, मैं getElementByName()सिर्फ नए डेवलपर्स के लिए समाधान देख रहा हूं ।

एनबी। प्रपत्र तत्वों के नाम आपके फ़ॉर्म को एक बार पोस्ट किए जाने योग्य होने के लिए अद्वितीय होने की आवश्यकता होगी, लेकिन DOM एक नाम को एक से अधिक तत्वों द्वारा साझा करने की अनुमति दे सकता है। उस कारण के लिए आईडी जोड़ने पर विचार करें कि क्या आप प्रपत्र तत्व नामों my_nth_select_named_xऔर के साथ स्पष्ट कर सकते हैं या हो सकते हैं my_nth_text_input_named_y।

उदाहरण का उपयोग कर getElementByName:

var e = document.getElementByName("my_select_with_name_ddlViewBy");
var strUser = e.options[e.selectedIndex].value;

Comments

काम नहीं करता है अगर my_select_with_name_ddlViewBy एक सरणी है जैसे my_select_with_name_ddlViewBy []

— zeuf

Answer 9

जावास्क्रिप्ट या jQuery का उपयोग करके इसे पूरा करने के दो तरीके हैं।

जावास्क्रिप्ट:

var getValue = document.getElementById('ddlViewBy').selectedOptions[0].value;

alert (getValue); // This will output the value selected.

या

var ddlViewBy = document.getElementById('ddlViewBy');

var value = ddlViewBy.options[ddlViewBy.selectedIndex].value;

var text = ddlViewBy.options[ddlViewBy.selectedIndex].text;

alert (value); // This will output the value selected

alert (text); // This will output the text of the value selected

jQuery:

$("#ddlViewBy:selected").text(); // Text of the selected value

$("#ddlViewBy").val(); // Outputs the value of the ID in 'ddlViewBy'

Answer 10

महज प्रयोग करें

• $('#SelectBoxId option:selected').text(); सूचीबद्ध के रूप में पाठ प्राप्त करने के लिए

• $('#SelectBoxId').val(); चयनित सूचकांक मान प्राप्त करने के लिए

Comments

यह jQuery का उपयोग करता है, जो ओपी के प्रश्न का उत्तर नहीं देता है।

— डेविड मेजा

Answer 11

पिछले जवाब अभी भी संभावनाओं, कोड की idगहनता और बनाम के उपयोग के कारण सुधार के लिए जगह छोड़ते हैं name। एक चयनित विकल्प के तीन डेटा का एक रीड-आउट प्राप्त कर सकते हैं - इसका सूचकांक नंबर, इसका मूल्य और इसका पाठ। यह सरल, क्रॉस-ब्राउज़र कोड तीनों करता है:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo GetSelectOptionData</title>
</head>
<body>
    <form name="demoForm">
        <select name="demoSelect" onchange="showData()">
            <option value="zilch">Select:</option>
            <option value="A">Option 1</option>
            <option value="B">Option 2</option>
            <option value="C">Option 3</option>
        </select>
    </form>

    <p id="firstP">&nbsp;</p>
    <p id="secondP">&nbsp;</p>
    <p id="thirdP">&nbsp;</p>

    <script>
    function showData() {
        var theSelect = demoForm.demoSelect;
        var firstP = document.getElementById('firstP');
        var secondP = document.getElementById('secondP');
        var thirdP = document.getElementById('thirdP');
        firstP.innerHTML = ('This option\'s index number is: ' + theSelect.selectedIndex + ' (Javascript index numbers start at 0)');
        secondP.innerHTML = ('Its value is: ' + theSelect[theSelect.selectedIndex].value);
        thirdP.innerHTML = ('Its text is: ' + theSelect[theSelect.selectedIndex].text);
    }
     </script>
</body>
</html>

लाइव डेमो: http://jsbin.com/jiwena/1/edit?html,output ।

idमेकअप उद्देश्यों के लिए इस्तेमाल किया जाना चाहिए। कार्यात्मक रूप उद्देश्यों के लिए, nameअभी भी मान्य है, HTML5 में भी, और अभी भी उपयोग किया जाना चाहिए। अंत में, कुछ स्थानों पर चौकोर बनाम गोल कोष्ठक के उपयोग का ध्यान रखें। जैसा कि पहले समझाया गया था, इंटरनेट एक्सप्लोरर के केवल (पुराने संस्करण) सभी स्थानों में राउंड को स्वीकार करेंगे।

Answer 12

JQuery का उपयोग करना:

$('select').val();

Answer 13

एक और उपाय है:

document.getElementById('elementId').selectedOptions[0].value

Answer 14

यह कैसे काम करता है इसका चल रहा उदाहरण:

var e = document.getElementById("ddlViewBy");
var val1 = e.options[e.selectedIndex].value;
var txt = e.options[e.selectedIndex].text;

document.write("<br />Selected option Value: "+ val1);
document.write("<br />Selected option Text: "+ txt);

<select id="ddlViewBy">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3"  selected="selected">test3</option>
</select>

ध्यान दें: मानों में बदलाव नहीं होता है क्योंकि ड्रॉपडाउन को बदल दिया जाता है, यदि आपको उस कार्यक्षमता की आवश्यकता है तो एक ऑनक्लिक परिवर्तन लागू किया जाना चाहिए।

Comments

यह दिखाने के लिए अच्छा जवाब कि उपयोग के बाद कोड को कैसे ताज़ा किया जाना चाहिए!

— उपयोगकर्ता जो

Answer 15

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

उदाहरण के लिए

var myElement = document.getElementById('ddlViewBy');

var myValue = myElement.querySelector('[selected]').value;

Answer 16

मुझे इस बारे में थोड़ा अलग दृष्टिकोण है कि इसे कैसे प्राप्त किया जाए। मैं आमतौर पर निम्नलिखित दृष्टिकोण के साथ ऐसा कर रहा हूं (यह एक आसान तरीका है और जहां तक ​​मुझे पता है हर ब्राउज़र के साथ काम करता है):

<select onChange="functionToCall(this.value);" id="ddlViewBy">
  <option value="value1">Text one</option>
  <option value="value2">Text two</option>
  <option value="value3">Text three</option>
  <option value="valueN">Text N</option>
</select>

Answer 17

2015 में, फ़ायरफ़ॉक्स में , निम्नलिखित भी काम करता है।

इ। विकल्प .selectedIndex

Answer 18

पिछले उत्तरों के साथ जाने के लिए, यह है कि मैं इसे वन-लाइनर के रूप में कैसे करता हूं। यह चयनित विकल्प के वास्तविक पाठ को प्राप्त करने के लिए है। सूचकांक संख्या पहले से ही प्राप्त करने के लिए अच्छे उदाहरण हैं। (और पाठ के लिए, मैं सिर्फ इस तरह दिखाना चाहता था)

let selText = document.getElementById('elementId').options[document.getElementById('elementId').selectedIndex].text

कुछ दुर्लभ उदाहरणों में आपको कोष्ठक का उपयोग करने की आवश्यकता हो सकती है, लेकिन यह बहुत दुर्लभ होगा।

let selText = (document.getElementById('elementId')).options[(document.getElementById('elementId')).selectedIndex].text;

मुझे संदेह है कि यह दो लाइन संस्करण की तुलना में किसी भी तेजी से प्रक्रिया करता है। मैं बस अपने कोड को यथासंभव समेकित करना चाहता हूं।

दुर्भाग्य से यह अभी भी दो बार तत्व प्राप्त करता है, जो आदर्श नहीं है। एक विधि जो केवल एक बार तत्व को पकड़ लेती है वह अधिक उपयोगी होगी, लेकिन मैंने कोड की एक पंक्ति के साथ ऐसा करने के संबंध में अभी तक पता नहीं लगाया है।

Answer 19

यहाँ एक जावास्क्रिप्ट कोड लाइन है:

var x = document.form1.list.value;

यह मानते हुए कि ड्रॉपडाउन मेनू को सूची नाम दिया गया है name="list"और नाम विशेषता के साथ एक रूप में शामिल किया गया है name="form1"।

Comments

ओपी ने कहा कि उनके लिए काम नहीं किया: "मैंने नीचे दिए तरीकों की कोशिश की, लेकिन वे सभी मूल्य के बजाय चयनित सूचकांक लौटाते हैं: var as = document.form1.ddlViewBy.value;..."

— उपयोगकर्ता जो उपयोगकर्ता नहीं है

Answer 20

आपको इसे querySelectorप्राप्त करने के लिए उपयोग करना चाहिए । यह फार्म तत्वों से मूल्य प्राप्त करने के तरीके को भी मानकीकृत करता है।

var dropDownValue = document.querySelector('#ddlViewBy').value;

फिडल: https://jsfiddle.net/3t80pubr/

Answer 21

मुझे नहीं पता कि क्या मैं ऐसा हूं जो प्रश्न को सही नहीं मानता है, लेकिन यह सिर्फ मेरे लिए काम करता है: आपके html, onchange () ईवेंट का उपयोग करना, जैसे।

<select id="numberToSelect" onchange="selectNum">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

// जावास्क्रिप्ट

function sele(){
    var strUser = numberToSelect.value;
}

यह आपको प्रति क्लिक के चयन ड्रॉपडाउन पर जो भी मूल्य है वह देगा

Answer 22

ऐसा करने का सबसे सरल तरीका है:

var value = document.getElementById("selectId").value;

Comments

वह मूल्य नहीं बल्कि चयनित बॉक्स के दिखाए गए पाठ

— थानिसिस

Answer 23

यहाँ एक आसान तरीका है इसे एक onchange फ़ंक्शन में करने के लिए:

event.target.options[event.target.selectedIndex].dataset.name

Comments

सादगी के बारे में बात करते हुए, मैं इस घटना के

— क्रिश्चियन लॉरबैग

Answer 24

बस करो: document.getElementById('idselect').options.selectedIndex

तब आपको 0 में शुरू होने वाले चुनिंदा सूचकांक मूल्य मिलेंगे।

Comments

यह काम नहीं कर रहा है

— हुज्जत नज़ारी

Answer 25

प्रयत्न

ddlViewBy.value                      // value

ddlViewBy.selectedOptions[0].text    // label

console.log( ddlViewBy.value );

console.log( ddlViewBy.selectedOptions[0].text );

<select id="ddlViewBy">
  <option value="1">Happy</option>
  <option value="2">Tree</option>
  <option value="3"  selected="selected">Friends</option>
</select>

Answer 26

कई विकल्पों के साथ ड्रॉप-डाउन मेनू बनाएं (जितने चाहें उतने!)

<select>
  <option value="giveItAName">Give it a name
  <option value="bananaShark">Ridiculous animal
  <ooption value="Unknown">Give more options!
</select>

मैं थोड़ा प्रफुल्लित हुआ। यहाँ कोड स्निपेट है:

<select>
  <option value="RidiculousObject">Banana Shark
  <option value="SuperDuperCoding">select tag and option tag!
  <option value="Unknown">Add more tags to add more options!
</select>
<h1>Only 1 option (Useless)</h1>
<select>
  <option value="Single">Single Option
</select>  

हाँ स्निपेट ने काम किया