Question

我能够在下拉列表中选择文本并将其推入数组并显示所选的选项，但是当我取消选择先前选择的选项时，值将追加到数组中……并显示重复的值..我可以避免这种情况，但我无法纠正。.有人可以帮我解决问题吗？

HTML

我正在使用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>

Answer 1

您似乎需要在将值推至optionVal的那一行上放置一个条件。另外，您需要先清除#test_item，然后再附加。请参见下面的代码和JSfiddle。

$(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());
   });
});

这应该防止将重复项添加到optionVal数组中，而又避免将重复项追加到您的<select>

示例：JSFiddle

Answer 2

问题在下面一行

@Override
public void instantiateCard(LayoutInflater inflaterService, final ViewGroup head, ListView list, ECCardData data) {
    final LinearLayout headerButtonContainer = head.findViewById(R.id.headerButtonContainer);
    final LinearLayout nameContainer = head.findViewById(R.id.nameContainer);
    final TextView tvAailablePlacesHead = head.findViewById(R.id.tvAvailablePlacesHead);
    final TextView tvNameHead = head.findViewById(R.id.tvNameHead);

// here I also tried setting the activities variables like
// tvAcNameHead = tvNameHead;
// since just decalring a field variable and using it like
// nameHeadFieldVariable = head.findViewById(R.id.tvNameHead);
// would lead to not being able to change the visibility here either

    // Card toggling by click on head element
    head.setOnClickListener(new View.OnClickListener() {
                @Override
        public void onClick(final View v) {
            ecPagerView.toggle();
                if (headerButtonContainer.getVisibility() == View.VISIBLE) {
                        setDetailOverlayItemsVisible(headerButtonContainer, nameContainer, tvNameHead, tvAailablePlacesHead);
                    } else {
                        setDetailOverlayItemsInvisible(headerButtonContainer, nameContainer, tvNameHead, tvAailablePlacesHead);
                    }
                }
            });
}

在这里您每次都清空选择选项，因此选择框中只有最后一个选项。因此将其替换为

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

它将在选择框中包含所有选定的选项，然后仅显示此html，无需附加。

因此被替换来自

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

收件人

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

在下面的代码段中检查测试数据，它正在工作

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

$(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());
});
});

Answer 3

Thans Nirali和Jacin

我已经解决了问题

 <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>

选择下拉式jQuery

3 个答案: