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

问题

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.

回答1:

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>

回答2:

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>

来源：https://stackoverflow.com/questions/66183431/jquery-append-to-the-multiple-dropdowns-for-matching-array-keys-as-class-name

标签

jquery

arrays