How to fetch multiple dropdowns selected value into a single array using JavaScript

Question

I am trying to fetch values of drop-downs into a node-list having dynamically using a JavaScript. In this code all the drop down have created dynamically and entering the value in a single node-list array. But my query is how to use dynamically. Can anyone suggest me.

please help..

thanks for advance...

<?php 
    $j=1;
    $proQuery=$this->db->query("select * from tbl_subcategory where category_id='$getInv->catg_id' and whr_to_use='for bom'");
    foreach($proQuery->result() as $proRow){
?>
<tr>
    <th style="width:200px"><?php $techQuery=$this->db->query("select * from tbl_technical_category where sub_catg_id='$proRow->subcategory_id'");
    //echo $proRow->subcategory_id;
    $i=1;
    foreach($techQuery->result() as $techRow){//echo $techRow->techcategory_id;
?>
        <select name="tech_prod" id="tech_prod<?=$j."^".$i;?>" class="form-control" required onchange="raptoit(this.id)" <?php if(@$_GET['view']!=''){ ?> disabled="disabled" <?php }?>>
            <option value="" selected disabled><?php echo $techRow->tech_catg_name;?></option>
            <?php $contQuery=$this->db->query("select * from tbl_technical_product where technical_sub_type='$techRow->techcategory_id'");
                $k=1;
                foreach($contQuery->result() as $contRow){
            ?>
            <option value="<?php echo $contRow->technical_pro_id; ?>"><?php echo $contRow->tech_pro_name; ?></option>
            <?php $k++;} ?>
        </select><?php $i++;}?>
        <input type="text" id="techId<?=$j;?>" name="techId[]" value="" readonly="" class="form-control"> 
    </th>
</tr>
<?php $j++;}?>
<script>
    function raptoit(d){
        var zz=document.getElementById(d).id;
        //alert(zz);
        var myarra = zz.split("^");
        var asx= myarra[1];
        var asx11= myarra[0];
        var value=asx11.split("tech_prod");
        var mainId=value[1];
        //alert(mainId);
        // all select element.
        var merge=document.getElementById(asx11+"^"+asx).value;
        //alert(dropValue);
        // convert nodeList to array
        var nodesArray = [].slice.call(document.querySelector("select"));
        //alert(nodesArray);
        var result = nodesArray.map(select => {return select.value;}).join(',');
        alert(result);
        document.getElementById("techId"+mainId).value=result;
    }
</script>

Answer 1

I have not looked in depth into your code but from a mere glance it seems you are doing it all wrong.

To get the items from the list and parse them on the server side. You should use ajax to communicate between the server and frontend. Look at this https://www.w3schools.com/php/php_ajax_php.asp