जावास्क्रिप्ट / jQuery: एकाधिक चयन में मान (चयन) सेट करें

Question

मेरे पास एक एकाधिक चयन है:

<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On">On</option>
</select>

मैं अपने डेटाबेस से डेटा लोड करता हूं। फिर मेरे पास एक स्ट्रिंग है:

var values="Test,Prof,Off";

मैं इस मान को एकाधिक चयन में कैसे सेट कर सकता हूं? पहले से ही एक सरणी में स्ट्रिंग बदलने की कोशिश की और इसे कई में मान के रूप में रखा, लेकिन काम नहीं करता ...! क्या कोई इस में मेरी मदद कर सकता है? धन्यवाद!!!

Answer 1

एक गतिशील चयनकर्ता में मूल्य का उपयोग करके लूप के माध्यम से आइटरेट करें जो विशेषता चयनकर्ता का उपयोग करता है।

var values="Test,Prof,Off";
$.each(values.split(","), function(i,e){
    $("#strings option[value='" + e + "']").prop("selected", true);
});

काम करने का उदाहरण http://jsfiddle.net/McddQ/1/

Comments

यह शांत है, लेकिन आप यह कैसे कहते हैं कि चयनित vlaues को id = string के साथ "एकाधिक चयन" में चुना जाना चाहिए?

— Zwen2012

@ user1824136 बहुत बढ़िया, खुशी है कि मैं आज सुबह किसी की मदद कर सका!

— केविन बोवर्स

अगर हम वैसे भी jQuery पर निर्भर रहने जा रहे हैं, तो zukaszW.pl को प्राथमिकता दें $('#strings').val(values.split(','))। JQuery के बिना, asukaszW.pl का प्लेन ओल्ड जावास्क्रिप्ट document.getElementById('strings').value = ["Test", "Prof", "Off"]भी एक लाइनर में पूरा होता है

— KyleMit

Answer 2

jQuery में:

$("#strings").val(["Test", "Prof", "Off"]);

या शुद्ध जावास्क्रिप्ट में:

var element = document.getElementById('strings');
var values = ["Test", "Prof", "Off"];
for (var i = 0; i < element.options.length; i++) {
    element.options[i].selected = values.indexOf(element.options[i].value) >= 0;
}

jQuery यहाँ महत्वपूर्ण अमूर्तता करता है।

Comments

इसने मेरे और मेरे 'चुने हुए' चयनों के लिए एकदम सही काम किया ... सभी मूल्यों को एक बार में जोड़ना है (जैसा आप ऊपर कहते हैं)

— टोड वेंस

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

— Bill Keese

यह तब काम कर रहा है जब मैं स्ट्रिंग पास कर रहा हूं, लेकिन तब नहीं जब मैं सरणी पास कर रहा हूं।

— रवि जी

एक ही मुद्दा रहा; यह केवल स्ट्रिंग मानों के साथ काम करता है, न कि सरणियों (सादे JS का उपयोग करके, jQuery का नहीं)।

— jayp

इसके साथ समस्याओं का सामना करने वाले लोगों के लिए, आपको जावास्क्रिप्ट में मान सेट करने के बाद सुनिश्चित करना चाहिए कि आप एक 'परिवर्तन' घटना को कैसे ट्रिगर करेंगे। JQuery का उपयोग करना यह $ ("# स्ट्रिंग्स") होगा। वैल (["टेस्ट", "प्रो", "" "])। ट्रिगर ('परिवर्तन');

— जॉन व्याट

Answer 3

मानों की एक सरणी के साथ सिर्फ jQuery वैल फ़ंक्शन प्रदान करें:

var values = "Test,Prof,Off";
$('#strings').val(values.split(','));

और एक ही प्रारूप में चयनित मान प्राप्त करने के लिए:

values = $('#strings').val();

Answer 4

शुद्ध जावास्क्रिप्ट ES6 समाधान

• एक querySelectorAllफ़ंक्शन के साथ हर विकल्प को पकड़ो और valuesस्ट्रिंग को विभाजित करें ।
• सरणी Array#forEachसे प्रत्येक तत्व पर पुनरावृति करने के लिए उपयोग करें values।
• Array#findदिए गए मूल्य से मेल खाते विकल्प को खोजने के लिए उपयोग करें ।
• सेट यह selectedविशेषता है true।

नोट : Array#fromएक सरणी जैसी ऑब्जेक्ट को एक सरणी में बदल देता है और फिर आप Array.prototypeउस पर फ़ंक्शंस का उपयोग करने में सक्षम होते हैं , जैसे खोज या नक्शा ।

var values = "Test,Prof,Off",
    options = Array.from(document.querySelectorAll('#strings option'));

values.split(',').forEach(function(v) {
  options.find(c => c.value == v).selected = true;
});

<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On">On</option>
</select>

Answer 5

मूल रूप से एक values.split(',')और फिर परिणामी सरणी के माध्यम से लूप करें और चयन करें सेट करें।

Answer 6

शुद्ध जावास्क्रिप्ट ES5 समाधान

किसी कारण से आप jQuery और ES6 का उपयोग नहीं करते हैं? यह आपकी मदद कर सकता है:

var values = "Test,Prof,Off";
var splitValues = values.split(',');
var multi = document.getElementById('strings');

multi.value = null; // Reset pre-selected options (just in case)
var multiLen = multi.options.length;
for (var i = 0; i < multiLen; i++) {
  if (splitValues.indexOf(multi.options[i].value) >= 0) {
    multi.options[i].selected = true;
  }
}

<select name='strings' id="strings" multiple style="width:100px;">
    <option value="Test">Test</option>
    <option value="Prof">Prof</option>
    <option value="Live">Live</option>
    <option value="Off">Off</option>
    <option value="On" selected>On</option>
</select>

Answer 7

var groups = ["Test", "Prof","Off"];

    $('#fruits option').filter(function() {
      return groups.indexOf($(this).text()) > -1; //Options text exists in array
    }).prop('selected', true); //Set selected

Answer 8

यह प्रतिस्थापन के लिए कुछ उत्तरों में त्रुटि है |

var mystring = "this|is|a|test";
mystring = mystring.replace(/|/g, "");
alert(mystring);

यह सुधार सही है लेकिन | अंत में यह इस तरह दिखना चाहिए \ |

var mystring = "this|is|a|test";
mystring = mystring.replace(/\|/g, "");
alert(mystring);