चयनित मूल्य / पाठ को परिवर्तन पर चयन से प्राप्त करें

Question

<select onchange="test()" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
</select>

मुझे जावास्क्रिप्ट में चयनित विकल्प का मूल्य प्राप्त करने की आवश्यकता है: क्या कोई जानता है कि चयनित मूल्य या पाठ कैसे प्राप्त करें, कृपया बताएं कि इसके लिए एक फ़ंक्शन कैसे लिखना है। मैंने onchange () फ़ंक्शन को चुना है ताकि मैं उसके बाद क्या करूँ?

Comments

यहां: stackoverflow.com/questions/1085801/… और यहाँ: stackoverflow.com/questions/4029281/get-drop-down-value

— Mika

आप केवल चाहते हैं valueकी optionहै कि तब चुना गया था ... <select onchange="window.alert(this.value);">... optionहै ... </select>... फिर सिर्फ इतना है कि और कुछ नहीं मिलना चाहिए।

— S0AndS0

Answer 1

इसके लिए जावास्क्रिप्ट या jQuery का उपयोग करें।

जावास्क्रिप्ट का उपयोग करना

<script>
function val() {
    d = document.getElementById("select_id").value;
    alert(d);
}
</script>

<select onchange="val()" id="select_id">

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

$('#select_id').change(function(){
    alert($(this).val());
})

Comments

.value () आधुनिक ब्राउज़रों पर काम करता है लेकिन वास्तव में पुराने लोगों पर नहीं। बाइट्स

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

@PlayHardGoPro चयनित मूल्य है। यदि आप पाठ चाहते थे (उदाहरण -Select- या संचार) तो आप पाठ का उपयोग करेंगे: select.textया jQuery में select.text()।

— रिक्शा

वहाँ के अंत में एक अर्धविराम गुम ... :)

— lindhe

JQuery का उपयोग करना $('#select_id option:selected').text()। यह चयनित विकल्प, चयन या संचार

— लौटाएगा

वेनिला जावास्क्रिप्ट दृष्टिकोण: document.getElementById("select_id").onchange = (evt) => { console.log(evt.srcElement.value); }

— स्पेंसर

Answer 2

यदि आप इसे देख रहे हैं, और नहीं चाहते कि इवेंट श्रोता एक विशेषता हो, तो उपयोग करें:

document.getElementById('my-select').addEventListener('change', function() {
  console.log('You selected: ', this.value);
});

<select id="my-select">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Answer 3

function test(a) {
    var x = (a.value || a.options[a.selectedIndex].value);  //crossbrowser solution =)
    alert(x);
}

<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2">Communication</option>
    <option value="3">Communication</option>
</select>

Comments

किस a.valueलिए है क्या कोई ब्राउज़र है जो वास्तव में इस तरह का समर्थन करता है? क्या हम सिर्फ इस्तेमाल नहीं कर सकते a.options[a.selectedIndex].value?

— बेनामी

@ नाम </ subj =) पाने के लिए

— el Dude

Answer 4

एक onchange समारोह के लिए कोई ज़रूरत नहीं है। आप मान को एक पंक्ति में पकड़ सकते हैं:

document.getElementById("select_id").options[document.getElementById("select_id").selectedIndex].value;

या, बेहतर पठनीयता के लिए इसे विभाजित करें:

var select_id = document.getElementById("select_id");

select_id.options[select_id.selectedIndex].value;

Answer 5

वाह, अभी तक जवाब के बीच कोई पुन: प्रयोज्य समाधान नहीं है .. मेरा मतलब है, एक standart घटना हैंडलर को केवल एक eventतर्क मिलना चाहिए और आईडी का उपयोग बिल्कुल नहीं करना चाहिए .. मैं उपयोग करूंगा:

function handleSelectChange(event) {

    // if you want to support some really old IEs, add
    // event = event || window.event;

    var selectElement = event.target;

    var value = selectElement.value;
    // to support really old browsers, you may use
    // selectElement.value || selectElement.options[selectElement.selectedIndex].value;
    // like el Dude has suggested

    // do whatever you want with value
}

आप प्रत्येक इनलाइन js के साथ इस हैंडलर का उपयोग कर सकते हैं:

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

jQuery:

jQuery('#select_id').on('change',handleSelectChange);

या वेनिला जेएस हैंडलर सेटिंग:

var selector = document.getElementById("select_id");
selector.onchange = handleSelectChange;
// or
selector.addEventListener('change', handleSelectChange);

और प्रत्येक के लिए इसे फिर से लिखना नहीं है select आपके पास तत्व के है।

उदाहरण स्निपेट:

function handleSelectChange(event) {

    var selectElement = event.target;
    var value = selectElement.value;
    alert(value);
}

<select onchange="handleSelectChange(event)">
    <option value="1">one</option>
    <option value="2">two</option>
</select>

Comments

महान समाधान, स्वीकार किया जाना चाहिए। शुद्ध घटना तत्व का उपयोग करना, बिना DOM दस्तावेज़ को संदर्भित करना सबसे लचीला तरीका है जो कई वातावरणों जैसे रिएक्ट, वीयू या सिर्फ सादे HTML रूपों में काम करता है।

— वनदेव

Answer 6

let dropdown = document.querySelector('select');
if (dropdown) dropdown.addEventListener('change', function(event) {
    console.log(event.target.value);
});

Comments

यदि आप एरो फ़ंक्शंस के साथ काम कर रहे हैं तो यह दृष्टिकोण सहायक है।

— फ्रैंचाइजी

किसी भी तीर फ़ंक्शन को फ़ंक्शन () {} से बदला जा सकता है, यह एक ही बात है

— रसेल स्ट्रॉस

यह समान नहीं है। thisएक एरो फंक्शन में इसका संदर्भ इसके शाब्दिक वातावरण से मिलता है लेकिन सामान्य फंक्शन का अपना यह है। यह

— फ्रैंची

Answer 7

उपयोग

document.getElementById("select_id").selectedIndex

या मान प्राप्त करने के लिए:

document.getElementById("select_id").value

Comments

मूल्य प्राप्त करने का यह तरीका पुराने ब्राउज़रों में काम नहीं करेगा, इसके बजाय डैनी के समाधान का उपयोग करें

— wlf

Answer 8

<script>
function test(a) {
    var x = a.selectedIndex;
    alert(x);
}
</script>
<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2">Communication</option>
    <option value="3">Communication</option>
</select>

अलर्ट में आपको चयनित इंडेक्स का INT मान दिखाई देगा, चयन को एक सरणी के रूप में देखें और आपको मूल्य मिलेगा

Answer 9

HTML:

<select onchange="cityChanged(this.value)">
      <option value="CHICAGO">Chicago</option>
      <option value="NEWYORK">New York</option>
</select>

जे एस:

function cityChanged(city) {
    alert(city);
}

Answer 10

मुझे आश्चर्य है कि हर किसी ने पाने के लिए valueऔर textविकल्प के बारे में पोस्ट किया है और किसी ने <option>सुझाव नहीं दिया हैlabel ।

इसलिए मैं सुझाव दे रहा हूं label भी , जैसा कि सभी ब्राउज़रों द्वारा समर्थित है

प्राप्त करने के लिए value(जैसा कि दूसरों ने सुझाव दिया है)

function test(a) {
var x = a.options[a.selectedIndex].value;
alert(x);
}

प्राप्त करने के लिए option text(यानी संचार या चयन-)

function test(a) {
var x = a.options[a.selectedIndex].text;
alert(x);
}

या (नया सुझाव)

function test(a) {
var x = a.options[a.selectedIndex].label;
alert(x);
}

एचटीएमएल

<select onchange="test(this)" id="select_id">
    <option value="0">-Select-</option>
    <option value="1">Communication</option>
    <option value="2" label=‘newText’>Communication</option>
</select>

नोट: के लिए HTML ऊपर में optionमान 2, labelवापस आ जाएगी newText के बजाय संचार

भी

ध्यान दें: फ़ायरफ़ॉक्स (केवल वापसी) में लेबल संपत्ति सेट करना संभव नहीं है।

Answer 11

यह एक पुराना प्रश्न है, लेकिन मुझे यकीन नहीं है कि लोगों ने फिर से DOM के माध्यम से खोज करने के बजाय जानकारी प्राप्त करने के लिए इवेंट ऑब्जेक्ट का उपयोग करने का सुझाव क्यों नहीं दिया।

बस अपने फंक्शन ऑन इवेंट में इवेंट ऑब्जेक्ट के माध्यम से जाएं, उदाहरण bellow देखें

function test() { console.log(event.srcElement.value); }

http://jsfiddle.net/Corsico/3yvh9wc6/5/

अगर यह डिफ़ॉल्ट व्यवहार 7 साल पहले नहीं था तो आज लोग इसे देख सकते हैं

Answer 12

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}

<select onchange="test()" id="select_id">
  <option value="0">-Select-</option>
  <option value="1">Communication</option>
</select>

Answer 13

function test(){
  var sel1 = document.getElementById("select_id");
  var strUser1 = sel1.options[sel1.selectedIndex].value;
  console.log(strUser1);
  alert(strUser1);
  // Inorder to get the Test as value i.e "Communication"
  var sel2 = document.getElementById("select_id");
  var strUser2 = sel2.options[sel2.selectedIndex].text;
  console.log(strUser2);
  alert(strUser2);
}

<select onchange="test()" id="select_id">
  <option value="0">-Select-</option>
  <option value="1">Communication</option>
</select>

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

Answer 14

मैंने अपने स्वयं के नमूने के साथ समझाने की कोशिश की है, लेकिन मुझे आशा है कि यह आपकी मदद करेगा। आपको लाइव परिणाम प्राप्त करने के लिए onchange = "test ()" कोड स्निपेट चलाने की आवश्यकता नहीं है ।

document.getElementById("cars").addEventListener("change", displayCar);

function displayCar() {
  var selected_value = document.getElementById("cars").value;
  alert(selected_value);
}

<select id="cars">
  <option value="bmw">BMW</option>
  <option value="mercedes">Mercedes</option>
  <option value="volkswagen">Volkswagen</option>
  <option value="audi">Audi</option>
</select>

Comments

बदलाव पर क्लिक इवेंट की तुलना में बहुत बेहतर है क्योंकि किसी विकल्प का चयन करना कैंसर नहीं है।

— रिले कार्नी

@ रिलेचीनी अच्छी तरह से, यह निर्भर करता है, जेएस भाग पर फ़ंक्शन नाम परिवर्तन पर यूआई भाग पर रिफैक्टिंग कोड बदलने के बजाय, यह अधिक सुरुचिपूर्ण है, और btw मैं किसी भी क्लिक इवेंट नहीं देखा।

आपने इसे onclick इवेंट haha ​​को निकालने के लिए संपादित किया है। तो छायादार, इससे पहले कि आप क्लिक कर रहे थे जो आपने कार के लिए क्लिक किया था, तो सूचना दी थी। edited 7 hours agoकम से कम आपने उस कोड को ठीक कर दिया जो अच्छी तरह से काम नहीं करता था।

— रिले कार्नी