HTML के onChange पर पैरामीटर कैसे पास करें का चयन करें

Question

मैं जावास्क्रिप्ट और jQuery में एक नौसिखिया हूँ। मैं एक कॉम्बोक्स-ए दिखाना चाहता हूं, जो कि एक एचटीएमएल है, जो <select>चयनित है idऔर सामग्री को दूसरी जगह पर ऑनचेंज () में है।

मैं इसके चयन के साथ पूरा कॉम्बोक्स idकैसे पारित कर सकता हूं, और मैं ऑनकेंज घटना की आग पर अन्य मापदंडों को कैसे पारित कर सकता हूं?

Comments

क्या आप कृपया कुछ कोड पोस्ट कर सकते हैं?

— KJYe.Name

Answer 1

function getComboA(selectObject) {
  var value = selectObject.value;  
  console.log(value);
}

<select id="comboA" onchange="getComboA(this)">
  <option value="">Select combo</option>
  <option value="Value1">Text1</option>
  <option value="Value2">Text2</option>
  <option value="Value3">Text3</option>
</select>

उपरोक्त उदाहरण आपको OnChange घटना पर कॉम्बो बॉक्स का चयनित मूल्य प्राप्त करता है ।

Comments

धन्यवाद, यह मेरे लिए काम किया है। मूल रूप से मैं एक ही कॉम्बोक्स को अलग-अलग जगह पर दिखाना चाहता हूं, इसलिए मैंने 2 कॉम्बोक्स को 2 अलग-अलग आईडी दिए हैं। वैसे भी, मैं अलग-अलग जगह पर एक ही कॉम्बोक्स दिखा सकता हूं। किसी भी प्रकार की सहायता सराहनीय होगी।

— गैंडफुल

अंदर मान को पुनः प्राप्त करने का एक अधिक सफल तरीका getComboA()हैvar value = sel.value;

— योनी

परिवर्तन ईवेंट केवल तभी फायर होता है जब चयन बॉक्स फोकस खो देता है। क्या मूल्य परिवर्तन के तुरंत बाद घटना को आग लगाने का एक तरीका है?

— doABarrelRoll721

इसके बजाय इस का उपयोग करें। और यह काम करेगा =) इसे भेजने से पूरे चुनिंदा तत्व को भेजा जा रहा है

— कॉलिन रिकल्स

मेरे मामले के लिए, कोड फ़ायरफ़ॉक्स पर काम कर रहा है लेकिन क्रोम पर नहीं।

— अविजित भट्टाचार्जी

Answer 2

एक और दृष्टिकोण जो कुछ स्थितियों में काम कर सकता है, चयनित <option />फ़ंक्शन के मान को सीधे इस तरह से पारित कर रहा है :

function myFunction(chosen) {
  console.log(chosen);
}

<select onChange="myFunction(this.options[this.selectedIndex].value)">
  <option value="1">Text 1</option>
  <option value="2">Text 2</option>
</select>

Comments

यह वही था जो मुझे चाहिए था। पहले से ही एक जावास्क्रिप्ट फ़ंक्शन था जिसने रंग के नमूने को क्लिक करने पर रंग की तस्वीर बदल दी। लेकिन इसके लिए अनुरोध था कि वह पेपल ड्रॉपडाउन चुनिंदा विकल्पों पर भी काम करे। इसका उपयोग किया गया था, लेकिन 'मूल्य' का उपयोग करने के बजाय (क्योंकि मुझे इसे पेपैल के लिए आवश्यक था) मैंने प्रत्येक विकल्प में एक 'लेबल' जोड़ा था जिसका उपयोग चर नामों के साथ किया गया था, जो मैं पिक्स बदलने के लिए उपयोग करता था। पूरी तरह से काम किया! धन्यवाद!!

— 18

यह अच्छा है। एक और सरल विकल्प एक वैध विकल्प है: <select onChange = "myFunction (this.value)">

— डैनियल सिल्वा

चयनित विकल्प की अन्य विशेषताओं तक पहुंचने के लिए उपयोगी है।

— सीस टिमरमैन

Answer 3

इसे jQuery में कैसे करें:

<select id="yourid">
<option value="Value 1">Text 1</option>
<option value="Value 2">Text 2</option>
</select>

<script src="jquery.js"></script>
<script>
$('#yourid').change(function() {
  alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
});
</script>

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

Comments

मैंने यह कोशिश की, लेकिन दस्तावेज़ में पहले से ही डाल दिया गया है, तो भी परिवर्तन फ़ंक्शन को बुलाया नहीं जा रहा है। मेरा कोड htmlData.push है ('<select id = "select" name = "choose">'); $ ('# चुनें')। परिवर्तन (फ़ंक्शन () {चेतावनी ('परिवर्तन कहा जाता है'); चेतावनी ('मूल्य के साथ विकल्प' + $ (यह) .value) () + और पाठ '+ $ (यह)। पाठ () + 'का चयन किया गया था।'), कृपया मेरी मदद करें।

— Gendaful

@ सामान्य: htmlData.push($('<select id="choose" name="choose">'));चाल करना चाहिए (आप पहले एक पूर्ण नोड के बजाय एक स्ट्रिंग धक्का दिया)। > 6 साल बीत गए ...

— जोहान्स

Answer 4

जावास्क्रिप्ट समाधान

<select id="comboA">
<option value="">Select combo</option>
<option value="Value1">Text1</option>
<option value="Value2">Text2</option>
<option value="Value3">Text3</option>
</select>

<script>
 document.getElementById("comboA").onchange = function(){
    var value = document.getElementById("comboA").value;
 };
</script>

या

<script>
 document.getElementById("comboA").onchange = function(evt){
    var value = evt.target.value;
 };
</script>

या

<script>
 document.getElementById("comboA").onchange = handleChange;

 function handleChange(evt){
    var value = evt.target.value;
 };
</script>

Comments

यह यहां का सबसे सामान्य और व्यापक समाधान है। धन्यवाद!

— divs1210

Answer 5

मुझे @ पीयूष का उत्तर मददगार लगा, और इसे जोड़ने के लिए, यदि आप प्रोग्राम का चयन करते हैं, तो इस व्यवहार को प्राप्त करने का एक महत्वपूर्ण तरीका है जो स्पष्ट नहीं हो सकता है। मान लें कि आपके पास एक फ़ंक्शन है और आप एक नया चयन बनाते हैं:

var changeitem = function (sel) {
  console.log(sel.selectedIndex);
}
var newSelect = document.createElement('select');
newSelect.id = 'newselect';

सामान्य व्यवहार कहना पड़ सकता है

newSelect.onchange = changeitem;

लेकिन यह वास्तव में आपको उस तर्क को निर्दिष्ट करने की अनुमति नहीं देता है, इसलिए इसके बजाय आप ऐसा कर सकते हैं:

newSelect.setAttribute('onchange', 'changeitem(this)');

और आप पैरामीटर सेट करने में सक्षम हैं। यदि आप इसे पहले तरीके से करते हैं, तो आप अपने onchangeफ़ंक्शन के लिए जो तर्क प्राप्त करेंगे, वह ब्राउज़र पर निर्भर होगा। दूसरा तरीका क्रॉस-ब्राउज़र को ठीक काम करना प्रतीत होता है।

Comments

आपका दुष्ट eval-समान स्ट्रिंग-टू-कोड रूपांतरण आवश्यक नहीं है। वास्तव में newSelect.onchange = changeitem;ठीक काम करता है यदि आप परिवर्तन को फिर से लिखते हैं var changeitem = function () {console.log(this.selectedIndex); };(जैसे thisकि फ़ंक्शन तर्क के बजाय उपयोग करना)। या, changeitemजैसा है वैसा छोड़ो और लिखो newSelect.onchange = function () {changeitem(this); };।

— स्टीव बायरेंस

newSelect.setAttribute ('onchange', 'changeitem (यह)'); - उसके लिए चीयर्स

— घोष

Answer 6

jQuery समाधान

मुझे चयनित विकल्प का पाठ मूल्य कैसे मिलेगा

चुनिंदा तत्वों में आमतौर पर दो मूल्य होते हैं जिन्हें आप एक्सेस करना चाहते हैं।
पहले सर्वर पर भेजा जाने वाला मान है, जो आसान है:

$( "#myselect" ).val();
// => 1

दूसरा चयन का पाठ मान है।
उदाहरण के लिए, निम्न चयन बॉक्स का उपयोग कर:

<select id="myselect">
  <option value="1">Mr</option>
  <option value="2">Mrs</option>
  <option value="3">Ms</option>
  <option value="4">Dr</option>
  <option value="5">Prof</option>
</select>

यदि आप स्ट्रिंग को "श्री" प्राप्त करना चाहते थे, यदि पहला विकल्प चुना गया था (सिर्फ "1" के बजाय) आप निम्नलिखित में ऐसा करेंगे:

$( "#myselect option:selected" ).text();
// => "Mr"  

यह सभी देखें

• .val () jQuery एपीआई प्रलेखन

Answer 7

यह मेरे लिए मददगार है।

चयन के लिए:

$('select_tags').on('change', function() {
    alert( $(this).find(":selected").val() );
});

रेडियो / चेकबॉक्स के लिए:

$('radio_tags').on('change', function() {
    alert( $(this).find(":checked").val() );
});

Answer 8

आप कोड का प्रयास कर सकते हैं

<select onchange="myfunction($(this).val())" id="myId">
    </select>

Answer 9

इस कोड को एक बार लिखने के बाद आप ऑन कोड परिवर्तन के बारे में बताएं, आप इस कोड को html के रूप में सहेज सकते हैं और आउटपुट को देख सकते हैं। यह आपके लिए समझने में आसान है।

<html>
    <head>
        <title>Register</title>
    </head>
    <body>
    <script>
        function show(){
            var option = document.getElementById("category").value;
            if(option == "Student")
                  {
                        document.getElementById("enroll1").style.display="block";
                  }
            if(option == "Parents")
                  {
                        document.getElementById("enroll1").style.display="none";
                  }
            if(option == "Guardians")
                  {
                        document.getElementById("enroll1").style.display="none";
                  }
        }
    </script>
            <form action="#" method="post">
                <table>
                    <tr>
                        <td><label>Name </label></td>
                        <td><input type="text" id="name" size=20 maxlength=20 value=""></td>
                    </tr>
                    <tr style="display:block;" id="enroll1">
                        <td><label>Enrollment No. </label></td>
                        <td><input type="number" id="enroll" style="display:block;" size=20 maxlength=12 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Email </label></td>
                        <td><input type="email" id="emailadd" size=20 maxlength=25 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Mobile No. </label></td>
                        <td><input type="number" id="mobile" size=20 maxlength=10 value=""></td>
                    </tr>
                    <tr>
                        <td><label>Address</label></td>
                        <td><textarea rows="2" cols="20"></textarea></td>
                    </tr>
                    <tr >
                        <td><label>Category</label></td>
                        <td><select id="category" onchange="show()">    <!--onchange show methos is call-->
                                <option value="Student">Student</option>
                                <option value="Parents">Parents</option>
                                <option value="Guardians">Guardians</option>
                            </select>
                        </td>
                    </tr>
                </table><br/>
            <input type="submit" value="Sign Up">
        </form>
    </body>
</html>

Answer 10

बस अगर कोई आपके द्वारा लिखी जा सकने वाली निर्भरता को डाउनलोड करने के बिना किसी रिएक्ट सॉल्यूशन की तलाश में है:

<select onChange={this.changed(this)}>
   <option value="Apple">Apple</option>
   <option value="Android">Android</option>                
</select>

changed(){
  return e => {
    console.log(e.target.value)
  }
}

कंस्ट्रक्टर में परिवर्तित () फ़ंक्शन को बांधना सुनिश्चित करें:

this.changed = this.changed.bind(this);

Answer 11

इसने मेरे लिए onchange = पर काम किया setLocation($(this).val())

यहाँ।

    @Html.DropDownList("Demo", 
new SelectList(ViewBag.locs, "Value", "Text"), 
new { Class = "ddlStyle", onchange = "setLocation($(this).val())" });