जावास्क्रिप्ट: एक चुनिंदा इनपुट से कई मान प्राप्त करें

Question

मेरे पास एक चुनिंदा इनपुट बॉक्स है जो मुझे एकाधिक मानों का चयन करने की अनुमति देता है। इस मामले में मेरे पास 4 श्रेणियां हैं और जब मैं किसी श्रेणी पर क्लिक करता हूं तो उपश्रेणियां दिखाई देती हैं। जैसा कि आप देख सकते हैं कि यह ठीक काम कर रहा है। एकमात्र मुद्दा यह है कि जब मैं एक से अधिक श्रेणी का चयन करता हूं तो यह केवल पहली चयनित श्रेणी की उपश्रेणियां दिखाता है। जब एकाधिक श्रेणियों का चयन किया जाता है तो मैं उपश्रेणियों के साथ प्रत्येक श्रेणी कैसे दिखा सकता हूं? उदाहरण के लिए यदि मैं श्रेणी 1, श्रेणी 2 और श्रेणी 3 का चयन करता हूं, तो मैं निम्नलिखित दिखाना चाहता हूं:

श्रेणी 1: उपश्रेणी 1.1, उपश्रेणी 1.2

श्रेणी 2: उपश्रेणी 2.1, उपश्रेणी 2.2

श्रेणी 3: उपश्रेणी 3.1, उपश्रेणी 3.2

    $('select').on('change', function () {
        var subcategories = '';
        var str = "This category contains these subcategories: ";
        var result = str.bold();

        switch (this.value) {
               case 'Category 1':
                subcategories = "Subcategory 1.1, Subcategory 1.2";
                break;
                
                case 'Category 2':
                subcategories = "Subcategory 2.1, Subcategory 2.2";
                break;
                
                case 'Category 3':
                subcategories = "Subcategory 3.1, Subcategory 3.2";
                break;
                
                case 'Category 4':
                subcategories = "Subcategory 4.1, Subcategory 4.2";
                break;
 
        }
        document.getElementById("showSubcategory").innerHTML = result + subcategories;
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option value="Category 1">Category 1</option>
  <option value="Category 2">Category 2</option>
  <option value="Category 3">Category 3</option>
  <option value="Category 4">Category 4</option>
</select>

<div id="showSubcategory"></div>

javascript jquery html

1

Dev 28 अक्टूबर 2019, 11:07

Answer 1

यह फ़ंक्शन आपको आपके वांछित परिणाम देगा। यह एक स्ट्रिंग बनाने के लिए चयन के विकल्पों पर Array.reduce का उपयोग करता है जो प्रत्येक चयनित विकल्प के लिए श्रेणी के नाम और उपश्रेणियों का प्रतिनिधित्व करता है:

$('select').on('change', function() {
  var subcategories = Object.values(this.options).reduce((c, v) => {
    if (v.selected) {
      switch (v.value) {
        case 'Category 1':
          subcategories = "Subcategory 1.1, Subcategory 1.2";
          break;
        case 'Category 2':
          subcategories = "Subcategory 2.1, Subcategory 2.2";
          break;
        case 'Category 3':
          subcategories = "Subcategory 3.1, Subcategory 3.2";
          break;
        case 'Category 4':
          subcategories = "Subcategory 4.1, Subcategory 4.2";
          break;
      }
      return c + v.value + ': ' + subcategories + '<br>';
    }
    return c;
  }, '');
  document.getElementById("showSubcategory").innerHTML = subcategories;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option value="Category 1">Category 1</option>
  <option value="Category 2">Category 2</option>
  <option value="Category 3">Category 3</option>
  <option value="Category 4">Category 4</option>
</select>

<div id="showSubcategory"></div>

1

Nick 28 अक्टूबर 2019, 08:25

Answer 2

$('select').on('change', function() {
  var collection = $(this)[0].selectedOptions;
  //console.log(collection);
  var subcategories = '';
  var str = "This category contains these subcategories: ";
  var result = str.bold();

  for (var i = 0; i < collection.length; i++) {
    //console.log(collection[i].label)
    switch (collection[i].label) {
      case 'Category 1':
        subcategories = "Subcategory 1.1, Subcategory 1.2";
        break;
      case 'Category 2':
        subcategories = "Subcategory 2.1, Subcategory 2.2";
        break;
      case 'Category 3':
        subcategories = "Subcategory 3.1, Subcategory 3.2";
        break;
      case 'Category 4':
        subcategories = "Subcategory 4.1, Subcategory 4.2";
        break;
    }

    result += subcategories;
  }

  document.getElementById("showSubcategory").innerHTML = result;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option value="Category 1">Category 1</option>
  <option value="Category 2">Category 2</option>
  <option value="Category 3">Category 3</option>
  <option value="Category 4">Category 4</option>
</select>

<div id="showSubcategory"></div>

आपके मामले में, आप चयनित की सूची पढ़ने के लिए selectedOptions का उपयोग कर सकते हैं।

0

sugars 28 अक्टूबर 2019, 08:27

Answer 3

switch का उपयोग करने के बजाय, किसी ऑब्जेक्ट को मान निर्दिष्ट करने का प्रयास करें और फिर मान सरणी को पुनरावृत्त करके संलग्न करें।

$('select').on('change', function() {
  var subcategories = '';
  let val = {
    cat_1: "Subcategory 1.1, Subcategory 1.2",
    cat_2: "Subcategory 2.1, Subcategory 2.2",
    cat_3: "Subcategory 3.1, Subcategory 3.2",
    cat_4: "Subcategory 4.1, Subcategory 4.2"
  };
  $(this).val().forEach((v, i) => {
    subcategories += `<div> Category ${i+1}-  ${val[v]}</div>`;
  })
  document.getElementById("showSubcategory").innerHTML = `
  <b>This category contains these subcategories: </b> ${subcategories}
  `;
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select multiple>
  <option value="cat_1">Category 1</option>
  <option value="cat_2">Category 2</option>
  <option value="cat_3">Category 3</option>
  <option value="cat_4">Category 4</option>
</select>

<div id="showSubcategory"></div>

1

Nidhin Joseph 28 अक्टूबर 2019, 08:29

जावास्क्रिप्ट: एक चुनिंदा इनपुट से कई मान प्राप्त करें

3 जवाब

संबंधित सवाल

नए सवाल