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




html-select (12)

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

मैंने नीचे दी गई विधियों का प्रयास किया लेकिन वे सभी मूल्य के बजाय चयनित इंडेक्स लौटाते हैं:

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

//This is one of the simplest form by (Narendra Kottamidde) :

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

2015 में, Firefox , निम्नलिखित भी काम करता है।

ई। विकल्प। चयनित Index


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

उदाहरण के लिए

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

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

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

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

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

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

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

यदि कोई जानता है कि तत्व को दो बार प्राप्त किए बिना एक पंक्ति में यह कैसे करना है, तो मैं आपको टिप्पणी करने और मुझे दिखाने के लिए प्यार करता हूं। मैं अभी तक इसे समझने में सक्षम नहीं हूं ...


एक बदले में फ़ंक्शन में ऐसा करने का एक आसान तरीका यहां दिया गया है:

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


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

कामकाजी DEMO

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

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


यदि आप कभी भी आईई के लिए लिखे गए कोड में चलाते हैं तो आप इसे देख सकते हैं:

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

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

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

वर्ग ब्रैकेट का उपयोग करने का सही तरीका है।


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

<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 strUser जाएगा। यदि आप वास्तव में चाहते हैं कि test2 , तो यह करें:

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

जो strUser test2 strUser जाएगा


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

var x = document.form1.list.value;

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


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

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

एनबी। एक बार पोस्ट किए जाने के बाद फॉर्म तत्वों के नाम आपके प्रयोग के लिए अद्वितीय होने की आवश्यकता होगी, लेकिन डीओएम एक से अधिक तत्वों द्वारा एक नाम साझा करने की अनुमति दे सकता है। इसी कारण से फॉर्म में आईडी जोड़ना, यदि आप कर सकते हैं, या फॉर्म तत्व के साथ स्पष्ट हो, 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;

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

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





html-select