एकाधिक चयन तत्व - विनिमय

Question

मेरे पास एक चुनिंदा तत्व है जो एकाधिक चयनों की अनुमति देता है। मैं चयनित मानों को पृष्ठ के किसी अन्य भाग (एक div या कुछ में) में प्रदर्शित करना चाहता हूं क्योंकि उपयोगकर्ता चयनित में परिवर्तन करता है।

"विकल्प" पर पुनरावृत्ति करने के लिए ऐसा करने का एकमात्र तरीका है और जांचें कि "चयनित" सत्य है या नहीं? यह बेहतर नहीं होगा क्योंकि प्रत्येक "ऑनचेंज" ईवेंट को पूरे चयन तत्व को फिर से चालू करने की आवश्यकता होगी।

यहाँ एक बेला यह दर्शाता है कि कैसे मैं वर्तमान में यह कर रहा हूँ, लेकिन मैं आशा करती हूं शायद वहाँ हर "बदलाव" पर सभी विकल्प खत्म हो पुनरावृत्ति करने के लिए की तुलना में एक बेहतर तरीका है: multiple select elment onchange fiddle

Answer 1

चेक jsFiddle Link

एक बहु का चयन रिटर्न पर .val() एक सरणी: यह उतना ही आसान हो सकता है।

Answer 2

आप jQuery का उपयोग कर सकते हैं

$('select').change(function() {alert($(this).val())}) 

Answer 3

आप इसके बजाय :selected Selector of jQuery का उपयोग कर सकते हैं, लेकिन मेरा मानना ​​है कि हुड के तहत, jQuery चयनित = सत्य पर एक लूप करता है।

Answer 4

आप परिवर्तन के बजाय धुंध का उपयोग कर सकते हैं, ताकि प्रत्येक चयन के बजाय चयन केवल एक बार संसाधित हो। http://jsfiddle.net/2mSUS/3/

Answer 5

आपके पहेली में, मैंने अभी .val() का उपयोग किया है।

var MyControl = document.getElementById('Control_ID'); 
var newValue = MyControl[MyControl.selectedIndex].value; 

बेशक

, CONTROL_ID चयन नियंत्रण की आईडी है: इस एक सरणी

JSFiddle Link

$(function() { 
    $('#fruits').change(function() { 
     console.log($(this).val()); 
    }); 
}); 

Answer 6

यह काम करता है देता है।

Answer 7

element.addEventListener('click', function(){alert(this.value)}) 

यह जेएस में एक समाधान है, आप इसे आसानी से jQuery पर पोर्ट कर सकते हैं। विचार चयन में प्रत्येक विकल्प में एक क्लिक श्रोता जोड़ने के लिए है। यह IE12 और addEventListener की वजह से नीचे काम नहीं करेगा, हालांकि इसके आसपास होने के तरीके हैं।

मुझे लगता है कि सूची में दोहराने के बाद यह एक बेहतर तरीका है। हालांकि आपको प्रत्येक विकल्प से जुड़ा श्रोता होना होगा।

Answer 8

मैं एक फॉर्म सबमिट कर रहा हूं। मेरे टेम्पलेट सहायक इस तरह दिखता है:

'submit #update': function(event) { 
    event.preventDefault(); 
    var obj_opts = event.target.tags.selectedOptions; //returns HTMLCollection 
    var array_opts = Object.values(obj_opts); //convert to array 
    var stray = array_opts.map((o)=> o.text); //to filter by: text, value or selected 
    //stray is now ["Test", "Milk Free"] for example, depending on the selection 
    //...do stuff... 
} 

आप onchange '