CODEWITHSUNDEEP
jquery
user5370838
user5370838

Reputation: 111

Delect in dropdown jquery

I am able to Select the text in dropdown and push it into an array and display the selected options but when i deselect the option which has been previously selected the values are appending into an array...and duplicate values are being displayed.. Hw can i avoid this i am not able to rectify..Can someone help me out to solve the issue?

HTML

I am using PHP

<select id="select_test" multiple="multiple" name="laboratory_tests[]"  class="collapse">
  <optgroup label="<?php echo $details[0]->investigation_name;?>">
     <?php foreach($mri_details as $post){?>
     <option value="<?php echo $post->parse_id;?>"><?php echo $post->test_name;?>
     </option>
     <?php }?>
   </optgroup>
</select>

JQUERY

<script type="text/javascript">
$(document).ready(function() {
$("#select_test").change(function(){
    var optionVal = [];
    $.each($("#select_test option:selected"), function(){            
        optionVal.push($(this).text());
    });
    var myselect = $('<select>');
    $.each(optionVal, function(index, key) {
     myselect.empty().append( $('<li class="list-group-item">').val(key).html(key) );
   });
  $('#test_item').append(myselect.html());
});
});
</script>

Upvotes: 0

Views: 68

Answers (3)

user5370838
user5370838

Reputation: 111

Thans Nirali and Jacin

I have solve the problem

 <script type="text/javascript">
 $(document).ready(function() {
 $("#select_test").change(function(){
    var optionVal = [];
    $.each($("#select_test option:selected"), function(){ 

        if ($.inArray($(this).text(), optionVal) == -1) {   
            optionVal.push($(this).text());
        }
    });
    var myselect = $('<select>');
    $.each(optionVal, function(index, key) {
     myselect.append( $('<li class="list-group-item">').val(key).html(key) );
   });
  $('#test_item').empty().append(myselect.html());
  });
});
</script>

Upvotes: 0

Gherkin
Gherkin

Reputation: 323

It looks like you need to put a condition around the line where you're pushing the value to optionVal. Additionally, you need to clear your #test_item before appending to it. See code and JSfiddle below.

$(document).ready(function() {
   $("#select_test").change(function(){
      $('#test_item').html(null);
      var optionVal = [];

      $.each($("#select_test option:selected"), function() {            
         if ($.inArray($(this).text(), optionVal) === -1) {          
            optionVal.push($(this).text());
         }
      });

      var myselect = $('<select>');
      $.each(optionVal, function(index, key) {
          myselect.append( $('<li class="list-group-item">').val(key).html(key) );
      });

      $('#test_item').append(myselect.html());
   });
});

This should prevent duplicates from being added to the optionVal array, and in turn from being appended to your <select>

Example: JSFiddle

Upvotes: 1

Nirali
Nirali

Reputation: 1786

Problem is with below line

myselect.empty().append( $('<li class="list-group-item">').val(key).html(key) );

Here you every time empting the select option so only last option is in select box.So replacing that with

myselect.append( $('<li class="list-group-item">').val(key).html(key) );

it will contain all selected options in select box and then just show this html, no need to append.

So replaced From

$('#test_item').append(myselect.html());

To

$('#test_item').html(myselect.html());

Check below snippt with test data, It is working

$(document).ready(function() {
$("#select_test").change(function(){
    var optionVal = [];
    $.each($("#select_test option:selected"), function(){            
        optionVal.push($(this).text());
    });
    var myselect = $('<select>');
    $.each(optionVal, function(index, key) {
     myselect.append( $('<li class="list-group-item">').val(key).html(key) );
   });
    $('#test_item').html(myselect.html());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="select_test" multiple="multiple" name="laboratory_tests[]"  class="collapse">
  <optgroup label="laboratory_tests_1">
  	<option value="1">test_name1</option>
  	<option value="2">test_name2</option>
  	<option value="3">test_name3</option>
  	<option value="4">test_name4</option>
  	<option value="5">test_name5</option>
   </optgroup>
   <optgroup label="laboratory_tests_2">
   	<option value="6">test_name6</option>
   	<option value="7">test_name7</option>
   	<option value="8">test_name8</option>
   	<option value="9">test_name9</option>
   	<option value="10">test_name10</option>
   </optgroup>
</select>

<div id="test_item"></div>

Upvotes: 1

Related Questions