CODEWITHSUNDEEP
javascriptjquerydrop-down-menu
miwa_p
miwa_p

Reputation: 435

create dependable dropdown inside the table

I am trying to add another dropdown list to my table that is dependable from my first dropdown list. I manage to add the first dropdown to each row but I am unable to create the second one .

In my example fiddle code on the col6 I want to create the new dropdown list using jquery (something like I already did with the first dropdown), but its options are dependet on the options from the first dropdown.For example, if in the first dropdown I choose a value "aaa" then in the second dropdown there will only be shown the options from the array "A" and so on. -

https://jsfiddle.net/Lqopej93/

I tried few codes but none of them worked out.

<html>
<head>
<title>Filtered CSV File</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="static/bootstrap.min.css" rel="stylesheet" media="screen">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs/dt-1.10.18/datatables.min.css"/>
</head>
  <body>
    <h1>
      Filtered CSV FIle
    </h1>
   <br/>
   <br/>
   <div class="myButtons">
     <input type="button" value="Add new row" class="btn btn-info" id="addRow">
     <input  type="button" value="Delete rows" id="delete-row" class="btn btn-info">
   </div>
   <br/>
   <div class="table-responsive">
     <table class="dataframe my_class" id="my_id">
       <thead>
         <tr style="text-align:right;">
           <th> </th>
           <th>col1</th>
           <th>col2</th>
           <th>col3</th>
           <th>col4</th>
           <th>col5</th>
           <th>col6</th>
           <th>col7</th>
           <th>col8</th>
         </tr>
       </thead>

       <tbody>
         <tr>
           <th>1</th>
           <td>row1</td>
           <td>row1</td>
           <td>row1</td>
           <td></td>
           <td>row1</td>
           <td><select name="code">
                    <option value="a">AAA</option>
                    <option value="b">BBB</option>
                </select></td>
           <td>row1</td>
           <td>row1</td>
         </tr>
         <tr>
           <th>2</th>
           <td>row2</td>
           <td>row2</td>
           <td>row2</td>
           <td></td>
           <td>row2</td>
           <td><select name="code">
                    <option value="a">AAA</option>
                    <option value="b">BBB</option>
                </select></td>
           <td>row2</td>
           <td>row2</td>
         </tr>
         <tr>
           <th>3</th>
           <td>row3</td>
           <td>row3</td>
           <td>row3</td>
           <td></td>
           <td>row3</td>
           <td><select name="code">
                    <option value="a">AAA</option>
                    <option value="b">BBB</option>
                </select></td>
           <td>row3</td>
           <td>row3</td>
         </tr>
       </tbody>
     </table>
   </div>

  </body>
</html>

$(function(){
    var firstDDM = ['aaa','bbb','ccc','ddd'];
  var firstshortcut = ['a','b','c','d'];
  var option = "",
        select = "";
  for(var i=0; i<firstDDM.length;i++){
    option += '<option value="'+ firstshortcut[i] + '">' + firstDDM[i] + '</option>';
  }
  select = '<select class="firstDDM" type="firstDDM">' + option + '</select>';

  $("tr").each(function() {
            $(this).find("td:eq(3)").append(select);
        });
});

var A = ['A1','A2','A3'];
var B = ['B1','B2','B3'];
var C = ['C1','C2','C3'];
var D = ['D1','D2','D3'];

$("#addRow").click(function(){
        $("#my_id").each(function(){
            var tds='<tr>';
            jQuery.each($('tr:last th', this), function(){
                tds += '<th>' +'<input type="checkbox" name="record" tittle="Delete this row"></input>' + '</th>';
            });
            jQuery.each($('tr:last td', this), function(){

                if($('select',this).length){
                    tds+= '<td>' + $(this).html() + '</td>';
                }else{
                    tds+= '<td></td>';
                }
            });
            tds+= '</tr>';
            $('tbody',this).append(tds);
            $('#my_id tbody tr:last').attr("contentEditable", true);
        });

    });

 //for the columns that need to be imported with dropdowns create editable option - temporarlly 
    $(function() {
    $("tr").each(function() {
        $(this).find("td:eq(3), td:eq(4),td:eq(5)").attr("contentEditable", true);
        });
    });

    //Find and remove selected table rows
    $('#delete-row').click(function(){
        var r = confirm('Are you sure you want to delete them all?');
        $("tbody").find('input[name="record"]').each(function(){
            if($(this).is(":checked")){
                if(r == true){
                    $(this).parents("tr").remove();
                }else{
                    return false;
                }

            }
        });
    });

Upvotes: 0

Views: 229

Answers (2)

Asfan Shaikh
Asfan Shaikh

Reputation: 769

$('table').on('change', 'select', function(){
    var selVal = eval($(this).val().toUpperCase());
  option = "";
  select = "";
  for(var i=0; i<selVal.length;i++){
    option += '<option value="'+ selVal + '">' + selVal[i] + '</option>';
  }
  select = '<select class="firstDDM" type="firstDDM">' + option + '</select>';
  console.log(option);
    $(this).parent('td').nextAll('td').find('select').parent('td').empty().append(select);
});

Upvotes: 1

Mischa
Mischa

Reputation: 1601

You just copy the logic and exchange the Var-Names/-Values:

$(function(){

  //---YOUR CODE----
  var firstDDM = ['aaa','bbb','ccc','ddd'];
  var firstshortcut = ['a','b','c','d']; 
  var option = "",
      select = "";
      
  for(var i=0; i<firstDDM.length;i++){
  	option += '<option value="'+ firstshortcut[i] + '">' + firstDDM[i] + '</option>';
  }
  
  select = '<select class="firstDDM" type="firstDDM">' + option + '</select>';
  
  
  //---SAME CODE - DIFFRENT VAR-NAMES---
  var secondshortcut = ['a','b'];
  var secondDDM = ['AAA','BBB'];
  var option2 = "",
      select2 = "";
  
  for(var j=0; j<secondDDM.length;j++){
  	option2 += '<option value="'+ secondshortcut[j] + '">' + secondDDM[j] + '</option>';
  }
  
  select2 = '<select name="code">' + option2 + '</select>';
  
  $("tr").each(function() {
    $(this).find("td:eq(3)").append(select);
    $(this).find("td:eq(5)").append(select2);
  });

})

EDIT: Make 2 dependant selects:

let optsA = ['A1','A2','A3'];
let optsB = ['B1','B2','B3'];
let optsC = ['C1','C2','C3'];

$('[name="s1"]').on('change', function () {
  let val = $(this).val();
  let opts;
  let options = [];
  if(val === 'a') {
    opts = optsA;
  } else if(val === 'b') {
    opts = optsB;
  } else {
    opts = optsC;
  }
  for(let i = 0; i < opts.length; i++) {
    options.push('<option value="' + opts[i] + '">' + opts[i] + '</option>');
  }
  $('[name="s2"]').html(options.join(''));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<select name="s1">
  <option value="a">A</option>
  <option value="b">B</option>
  <option value="c">C</option>
</select>

<select name="s2"></select>

Now you can put the two things together by yourself :)

Upvotes: 0

Related Questions