multiple dropdown with multi select values

multiple dropdown with multi select values and different values

by Khadeer Mohammed

HTML

<div class="box">
<table class="table">
<tr>
  <td>
  <select onchange="colChange(this)">
  <option value="0">select</option>
  <option value="hyd">Hyderabad</option>
  <option value="blr">Bengalore</option>
  <option value="mum">Mumbai</option>
  <option value="pun">Pune</option>
  </select>
  </td>
  <td>
  <span class="action" onclick="action(this,'add')">+</span>
  <span class="action" onclick="action(this,'minus')">-</span>
  </td>
</tr>
</table>
</div>



<script>
var exstCols = [];
  function action(e,type){
    if(type === "add"){
      var cloned = $(e).closest('tr').clone();
      $('.table').append(cloned);
    }
    
    if(type === "minus"){
    	$(e).closest('tr').remove();
    }
  }
  
  function colChange(e){
  	debugger;
  	var colId = $(e).val();
    var crntIndex = $(e).closest('tr').index();
    var trRow = $('.table tr');
    for(var i = 0; i<trRow.length; i++){
    	if(crntIndex != i){
      	if(colId === $(trRow[i]).find('select').val()){
          alert('Please do not select same name');
          $(e).val(0);
          $(e).focus();
        }
      }
    }
  }
 
  
</script>

CSS

.box {
  width: 50%;
  margin: 0 auto;
}
.table {
  border-collapse: collapse;
}
.table tr {
  border: 1px solid rgba(0,0,0,.1);
}
.table tr:nth-child(even) {
  background: #f2f2f2;
}
.table td {
  padding: 2px 10px;
}
.table .action {
  cursor: pointer;
  margin: 5px;
  background: #eee;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  text-align: center;
}