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




html-select (16)

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

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

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;

Answers

आलेख का संदर्भ लें जावास्क्रिप्ट या jQuery का उपयोग कर ड्रॉपडाउन तत्व का चयन करना । उन्होंने जावास्क्रिप्ट और jQuery का उपयोग करके कई तरीकों से इसे समझाया है।

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

$(‘select’).val();

शुरुआतकर्ता आईडी विशेषता के बजाय 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;

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

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


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

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").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'
}];

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

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

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

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

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

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


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

<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 e = document.getElementById("ddlViewBy"); 
var strUser = e.options(e.selectedIndex).value; 

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

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

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


पिछली उत्तर अभी भी संभावनाओं, कोड की अंतर्दृष्टि, और 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 selectedValue = document.getElementById("ddlViewBy").value;

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

कामकाजी 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>

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

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>

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


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

var x = document.form1.list.value;

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


<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 strUser = e.options[e.selectedIndex].value;

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

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

तो आप शब्दावली पर स्पष्ट हैं:

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

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

  • सूचकांक = 0
  • मूल्य = हैलो
  • पाठ = हैलो वर्ल्ड

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

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


var time = Date.now || function() {
  return +new Date;
};

time();




javascript html-select