ड्रॉपडाउन मेनू से कक्षा को टॉगल करें

मैं ड्रॉपडाउन मेनू में एक विकल्प चुनकर कक्षा को टॉगल करने का प्रयास करता हूं, मैंने यह जांचने के लिए एक चेतावनी() का उपयोग करने का प्रयास किया है, लेकिन मैं इसे काम करने के लिए प्रतीत नहीं कर सकता।ड्रॉपडाउन मेनू से कक्षा को टॉगल करें

एचटीएमएल:

<html> 
<body> 
    <select id="dropdown"> 
     <option value="1">Steinkjer</option> 
     <option value="2">Verdal</option> 
    </select> 
</body> 
</html>

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

$('#dropdown option:selected').click(function(){ 
    var getText = $('#dropdown option').text(); 
    alert($('.overlay-'+getText)); 
});

कृपया मुझे इस मुद्दे को हल करने में मदद।

स्रोत

2015-06-12 Bin4ry

(" #dropdown विकल्प: चयनित ")। पाठ(); – Bugfixer

संभावित विकल्प से [jQuery टॉगल div का संभावित डुप्लिकेट] (http://stackoverflow.com/questions/2767284/jquery-toggle-div-from-select-option) – Bugfixer

$('#dropdown option:selected') एक लाइव ऑब्जेक्ट नहीं है। आपका कोड क्लिक लोड हैंडलर को पृष्ठ लोड पर चयनित विकल्प से जोड़ता है। आपको या तो ईवेंट प्रतिनिधिमंडल का उपयोग करना चाहिए या select तत्व की change ईवेंट को बेहतर सुनना चाहिए।

$('#dropdown').on('change', function() { 
    // Get text content of the selected option 
    var getText = $('option:selected', this).text(); 
    // Get current value of the select element 
    // var getValue = this.value; 
    console.log(getText); 
    console.log($('.overlay-'+getText)); 
});

स्रोत

2015-06-12 08:01:03 undefined

जब मैं ड्रॉपडाउन पर क्लिक करता हूं, और टेक्स्ट प्राप्त करना चाहता था टैग के अंदर। मुझे केवल प्रतिक्रिया में मिलता है: [ऑब्जेक्ट ऑब्जेक्ट] – Bin4ry

@ Bin4ry ऐसा इसलिए है क्योंकि आप एक jQuery ऑब्जेक्ट को अलर्ट कर रहे हैं। आपको डीबगिंग के लिए 'console.log' का उपयोग करना चाहिए। पाठ को लॉगिंग करने के लिए आपको 'getText' चर को लॉग इन करना चाहिए जो कि jQuery ऑब्जेक्ट नहीं है। – undefined

मेरी उदाहरण जाँच, काम –

आप की जरूरत है:

निरुपित

चेक document.ready निष्पादित किया जाता है परिवर्तन घटना

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

एक पेज को सुरक्षित रूप से जब तक दस्तावेज है नहीं हेरफेर किया जा सकता "तैयार है।": https://learn.jquery.com/using-jquery-core/document-ready/

चेक इस स्निपेट:

$(document).ready(function() { 
 

 
    $('#dropdown').change(function() { 
 
    var getText = $('#dropdown option:selected').html(); 
 
    $("#test").removeClass(); 
 
    $("#test").toggleClass("overlay-" + getText); 
 
    }); 
 

 

 

 
});

.overlay-Steinkjer { 
 
    background-color: red; 
 
} 
 
.overlay-Verdal { 
 
    background-color: green; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<body> 
 
    <select id="dropdown"> 
 
    <option value="1">Steinkjer</option> 
 
    <option value="2">Verdal</option> 
 
    </select> 
 

 
    <p id="test">test paragraph</p> 
 
</body> 
 

 
</html>

स्रोत

2015-06-12 08:06:23

कैसे मैं इसे बनाना होगा तो यह वर्ग मैं मिल टॉगल भरा हुआ है, यह मैं क्या करने की कोशिश की है: $ (document) .ready (function() { $ ('# लटकती') .change (फ़ंक्शन() { var getText = $ ('# ड्रॉपडाउन विकल्प: चयनित')। html(); $ ('ओवरले -' + getText) .toggle(); }); }); – Bin4ry

$ ("# objID")। टॉगल क्लास ("क्लासनाम"); मुझे आपको दिखाने के लिए बदलाव करें –

संपादन की जांच करें !! –

ड्रॉपडाउन मेनू से कक्षा को टॉगल करें

उत्तर

संबंधित मुद्दे