एकाधिक विकल्पों का चयन करने के लिए जावास्क्रिप्ट

Question

मेरे पास एक चयन बॉक्स वाला एक फॉर्म है जो एकाधिक विकल्पों की अनुमति देता है। उपयोगकर्ता इन विकल्पों को सहेजने के बाद, यह उन्हें डेटाबेस तालिका में संग्रहीत करता है।

मैं फिर से एक विकल्प चुनने के लिए इस डेटाबेस तालिका को पढ़ सकता हूं। मुझे डेटाबेस से इस डेटा को पकड़ने में सक्षम होना चाहिए, इसे एक सरणी में डालें, फिर उस विकल्प बॉक्स में विकल्प चुनें जब वे अपने विकल्पों को "संपादित करें" पर जाएं।

किसी सरणी में डेटा को पढ़ना ठीक है, और मुझे पता है कि एक चयन बॉक्स में एक ही विकल्प कैसे चुना जाए, हालांकि मुझे यकीन नहीं है कि जावास्क्रिप्ट में कई विकल्पों को कैसे प्रबंधित किया जाए।

क्या कोई मुझे ऐसा करने के लिए आवश्यक जावास्क्रिप्ट को समझने में मदद कर सकता है?

Answer 1

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

<select id="choice" multiple="multiple"> 
    <option value="1">One</option> 
    <option value="2">two</option> 
    <option value="3">three</option> 
</select> 
<script type="text/javascript"> 

var optionsToSelect = ['One', 'three']; 
var select = document.getElementById('choice'); 

for (var i = 0, l = select.options.length, o; i < l; i++) 
{ 
    o = select.options[i]; 
    if (optionsToSelect.indexOf(o.text) != -1) 
    { 
    o.selected = true; 
    } 
} 

</script> 

हालांकि मैं इस बात से सहमत इस किया जाना चाहिए सर्वर साइड।

Answer 2

इस प्रकार की चीज सर्वर-साइड की जानी चाहिए, ताकि क्लाइंट पर ऐसे छोटे कार्यों के लिए उपयोग किए जाने वाले संसाधनों की मात्रा को सीमित किया जा सके।

var values = ["Red", "Green"], 
    colors = document.getElementById("colors"); 

_.each(colors.options, function (option) { 
    option.selected = ~_.indexOf(values, option.text); 
}); 

आप jQuery का उपयोग कर रहे हैं, यह कर सकता है: कहा जा रहा है, अगर आप सामने के अंत पर यह करने के लिए थे, मैं तुम्हें कोड स्वच्छ और संक्षिप्त रखने के लिए underscore.js की तरह कुछ प्रयोग करने पर विचार के लिए प्रोत्साहित करेगा और भी अधिक संक्षिप्त हो:

var values = ["Red", "Green"]; 

$("#colors option").prop("selected", function() { 
    return ~$.inArray(this.text, values); 
}); 

आप Underscore.js या jQuery की तरह एक उपकरण के बिना यह कर रहे थे, तो आप लिखने के लिए थोड़ा अधिक है, और यह थोड़ा और अधिक जटिल होने के लिए मिल सकता है:

var color, i, j, 
    values = ["Red", "Green"], 
    options = document.getElementById("colors").options; 

for (i = 0; i < values.length; i++) { 
    for (j = 0, color = values[i]; j < options.length; j++) { 
     options[j].selected = options[j].selected || color === options[j].text; 
    } 
} 

Answer 3

आप document.getElementById("cars").options पर जाकर किसी चयनित ऑब्जेक्ट के विकल्प सरणी तक पहुंच प्राप्त कर सकते हैं जहां 'कार' चुनिंदा ऑब्जेक्ट है।

एक बार जब आप एक विकल्प चुनने के लिए option[i].setAttribute('selected', 'selected'); पर कॉल कर सकते हैं।

मैं हर किसी के साथ सहमत हूं कि आप इस सर्वर पक्ष को करने से बेहतर हैं।

Answer 4

<script language="JavaScript" type="text/javascript"> 
<!-- 
function loopSelected() 
{ 
    var txtSelectedValuesObj = document.getElementById('txtSelectedValues'); 
    var selectedArray = new Array(); 
    var selObj = document.getElementById('selSeaShells'); 
    var i; 
    var count = 0; 
    for (i=0; i<selObj.options.length; i++) { 
    if (selObj.options[i].selected) { 
     selectedArray[count] = selObj.options[i].value; 
     count++; 
    } 
    } 
    txtSelectedValuesObj.value = selectedArray; 
} 
function openInNewWindow(frm) 
{ 
    // open a blank window 
    var aWindow = window.open('', 'Tutorial004NewWindow', 
    'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400'); 

    // set the target to the blank window 
    frm.target = 'Tutorial004NewWindow'; 

    // submit 
    frm.submit(); 
} 
//--> 
</script> 
The HTML 
<form action="tutorial004_nw.html" method="get"> 
    <table border="1" cellpadding="10" cellspacing="0"> 
    <tr> 
    <td valign="top"> 
     <input type="button" value="Submit" onclick="openInNewWindow(this.form);" /> 
     <input type="button" value="Loop Selected" onclick="loopSelected();" /> 
     <br /> 
     <select name="selSea" id="selSeaShells" size="5" multiple="multiple"> 
     <option value="val0" selected>sea zero</option> 
     <option value="val1">sea one</option> 
     <option value="val2">sea two</option> 
     <option value="val3">sea three</option> 
     <option value="val4">sea four</option> 
     </select> 
    </td> 
    <td valign="top"> 
     <input type="text" id="txtSelectedValues" /> 
     selected array 
    </td> 
    </tr> 
    </table> 
</form> 

Answer 5

@Peter बाले जवाब के आधार पर, मैं एक अधिक सामान्य समारोह बनाया:

@objectId: HTML object ID 
    @values: can be a string or an array. String is less "secure" (should not contain repeated value). 
    function checkMultiValues(objectId, values){ 
     selectMultiObject=document.getElementById(objectId); 
     for (var i = 0, l = selectMultiObject.options.length, o; i < l; i++) 
     { 
      o = selectMultiObject.options[i]; 
      if (values.indexOf(o.value) != -1) 
      { 
      o.selected = true; 
      } else { 
      o.selected = false; 
      } 
     } 
    } 

उदाहरण: checkMultiValues('thisMultiHTMLObject','a,b,c,d');