jQuery - Append to the multiple dropdowns for matching array keys as class name

Question

var obj:

{1: Array(1), 2: Array(1), 5: Array(3), 6: Array(3), 27: Array(2)}
1: ["BC8907"]
2: ["B6789"]
5: (3) ["H67890", "BC567", "BC8907"]
6: (3) ["BH123", "BH1234", "BM2345"]
27: (2) ["EPC123", "EPC1234"]

As you can see from the above array, there are five keys(1,2,5,6,27).

I have a set of select tags in the DOM, with any one of the array key as class name. I'm trying to append values to all the dropdowns as options for the matching key as class names.

For example:

<select name="hno[]" class="5">
    <option value="BC8907" selected="">BC8907</option>
</select>

In the above dropdown, need to append the values of the key 5(H67890,BC567) as the dropdown also having the same number as class name. Also, need to ignore the value BC8907 as the dropdown already has the same value.

Expected Output:

<select name="hno[]" class="5">
    <option value="BC8907" selected="">BC8907</option>
    <option>H67890</option>
    <option>BC567</option>
</select>

I tried with jquery each but it's not working as expected.

Note: The array values and the dropdown class names are dynamically added.

Show us your attempt. Also what kind of array is that? Post proper JS data sample that you will work with. Create [mre] — ikiK, Feb 13 '21 at 12:03
from where that array coming using ajax ? If yes please show json . — Swati, Feb 13 '21 at 13:07
but how ? using ajax , how that things fetch ..etc ? please add more details to your question . — Swati, Feb 13 '21 at 13:10
I see but that's php code first just use these [suggestion](https://stackoverflow.com/questions/4885737/pass-a-php-array-to-a-javascript-function) to make that available inside jquery/js code . Onces , done this update your question . — Swati, Feb 13 '21 at 13:26
@Swati Ive added the javasript array result by using var obj = ; as mentioned in the suggestion. Updated result is copied from the console log. — Hello, Feb 13 '21 at 13:36
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/228669/discussion-between-hello-and-swati). — Hello, Feb 13 '21 at 13:41

Frenchy · Answer 1 · 2021-02-13T14:19:04.370

1

to add some option to your select: i have created 2 function valExist to test if text exist in the dropdown, and another function addOption

var arr = {
   "1":["BC8907"],
   "2":["B6789"],
   "5":["H67890", "BC567", "BC8907"],
   "6":["BH123", "BH1234", "BM2345"],
   "27":["EPC123", "EPC1234"]
   };

   Object.keys(arr).forEach(k =>{
   
      var clas = k;
      arr[k].forEach(v =>{
         if(!valExist(k, v)) addOption(k, v);
      });

   });

   
    function addOption(clas, txt){
       $('select.' + clas).append($('<option>').text(txt));
    }
    
    function valExist(clas, txt){
       var result = $('select.' + clas + ' option').filter(function() {
          return $(this).text().trim() == txt;
       });
       return result.length > 0;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="hno[]" class="5">
    <option value="BC8907" selected="">BC8907</option>
</select>

<select name="hno[]" class="27">
</select>

<select name="hno[]" class="6">
    <option value="BH1234">BH1234</option>
    <option value="BM2345">BM2345</option>
</select>

edited Feb 13 '21 at 14:19

answered Feb 13 '21 at 12:41

Frenchy

16,386
3
16
39

The classes are dynamically added. – Hello Feb 13 '21 at 12:43
@hello i was fixing that!! – Frenchy Feb 13 '21 at 12:44
Need to add the values from array as mentioned. – Hello Feb 13 '21 at 12:54
its an array of arrays? – Frenchy Feb 13 '21 at 12:57
you have an array of 27 arrays with some arrays empty? its not clear it misses how your datas are built – Frenchy Feb 13 '21 at 13:19
It has two values – Hello Feb 13 '21 at 13:20
so its not an array of array.. its an object with each key has 1 array – Frenchy Feb 13 '21 at 13:46

score 1 · Accepted Answer · answered Feb 13 '21 at 14:10

You can use .each loop to iterate through your select then get class of select and then using that class get JSON Object and then add option inside selects .

Demo Code :

//use json.parse before using..further 
var new_data = {
  "1": ["BC8907"],
  "2": ["BC8907"],
  "5": ["H67890", "BC567", "BC8907"],
  "6": ["BH123", "BH1234", "BM2345"],
  "27": ["EPC123", "EPC1234"]
}
//loop through each selects
$("select").each(function() {
  var classes = $(this).attr("class")
  var option = "";
  var selector = $(this)
  //loop through jsons 
  $(new_data[classes]).each(function(i, val) {
    //if the vlue does not exist
    if (selector.find("option[value=" + val + "]").length == 0) {
      option += '<option value=' + val + '>' + val + '</option>'
    }
  })
  $(this).append(option)
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="hno[]" class="5">
  <option value="BC8907" selected="">BC8907</option>
</select>
<select name="hno[]" class="6">
</select>
<select name="hno[]" class="27">
</select>

jQuery - Append to the multiple dropdowns for matching array keys as class name

2 Answers2

Linked