"बूटस्ट्रैप-सिलेक्ट" से मूल्य प्राप्त करें

Question

मेरे पास एक चयन बॉक्स है और जब मैं विकल्प चुनता हूं तो यह चयन बॉक्स के मूल्यों के साथ इनपुट बॉक्स को अपडेट करता है। यह बूटस्ट्रैप-सिलेक्ट के पुराने संस्करण के साथ काम कर रहा है। लेकिन नए संस्करण में यह अब काम नहीं करता है। मैं इसे नए संस्करण में काम करने के लिए एक रास्ता तलाश रहा हूं। धन्यवाद।

• पुराने संस्करण (काम): http://jsfiddle.net/u967uwtf/
• नया संस्करण (काम नहीं कर रहा): http://jsfiddle.net/9nzcLar6/

HTML:

<select class="selectpicker Categoria" multiple=""> 
    <option selected>A1</option> 
    <option selected>A2</option> 
    <option>A3</option> 
    <option>A4</option> 
</select> 
<input type="text" class="ChangeCategory" name="ChangeCategory"> 

जे एस:

$('select').selectpicker(); 

$(".Categoria").change(function() { 
    f2(); 
}); 

var f2 = function(){ 
    $('.ChangeCategory').val($(".Categoria").val()); 
} 
f2(); 

Answer 1

सभी समाधानों को प्राप्त करने के लिए Array.from() और map विधियों का उपयोग करना एक समाधान है।

var values=Array.from($(".Categoria").find(':selected')).map(function(item){ 
    return $(item).text(); 
}); 

कार्य समाधान

$('select').selectpicker(); 
 

 
$(".Categoria").change(function() { 
 
    f2(); 
 
}); 
 

 
var f2 = function(){ 
 
    var values=Array.from($(".Categoria").find(':selected')).map(function(item){ 
 
     return $(item).text(); 
 
    }); 
 
    $('.ChangeCategory').val(values); 
 
} 
 
f2();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/><select class="selectpicker Categoria" multiple=""> 
 
    <option selected>A1</option> 
 
    <option selected>A2</option> 
 
    <option>A3</option> 
 
    <option>A4</option> 
 
</select> 
 
<input type="text" class="ChangeCategory" name="ChangeCategory">

आप कोड की एक पंक्ति में भी ऐसा कर सकते हैं,,, arrow समारोह का उपयोग कर।

$('.ChangeCategory').val(Array.from($(".Categoria option:selected")).map(a=>$(a).text()).join(',')); 

Answer 2

नीचे के साथ f2 बदल देते हैं:

var f2 = function(){ 
$('.ChangeCategory').val($(".Categoria option:selected").text()); 
}