Question

在继续之前，让我给你一个jsfiddle链接

我有两个下拉列表

<select id="campaign_list">
    <option value="01 - AU -Bingo Campaign1">01 - AU -Bingo Campaign1</option>
    <option value="02 - BR-Bingo  Campaign2">02 - BR-Bingo  Campaign2</option>
    <option value="03 - CA-Bingo  Campaign3">03 - CA- Bingo Campaign3</option>
    <option value="04- US - Bingo  Campaign4">04- US - Bingo  Campaign4</option>
</select>



<select id="camp_list">
    <option value="Test 3">Test 3</option>
    <option value="Contra 2">Contra 2</option>
    <option value="Naturom Demonto">Naturom Demonto</option>
    <option value="Necronomicon es Mortes">Necronomicon es Mortes</option>
</select>

我暗示为他们选择了图书馆......

$(document).ready(function()
{
  $('#campaign_list').chosen({no_results_text: "Oops, nothing found!"});
  $('#campaign_list').css({'width':'100%',
                           'height':'30px',
                           'border-radius':'2px'});

  $('#campaign_list_chosen').css({'width':'100%',
                                  'height':'30px',
                                  'border-radius':'2px'});


  $('#camp_list').chosen({no_results_text: "Oops, nothing found!"});

  $('#camp_list').css({'width':'100%',
                       'height':'30px',
                       'border-radius':'2px'});

  $('#camp_list_chosen').css({'width':'100%',
                              'height':'30px',
                              'border-radius':'2px'});    


  $("#campaign_list_chosen").find("input").on('keyup',
        function()
        {
          var final_list = '';
          var srch_array = new Array();
          var srch_option = new Array();
          var list_option = new Array();
          var str_srch = $(this).val();
          var final_list_option = new Array();    
          srch_array = str_srch.split("");
          var srch_array_lengh = srch_array.length;    
          $("#campaign_list option").each(function()
          {
               list_option.push($(this).val());
          });
          for(var lo = 0; lo < list_option.length; lo++)
          {
            var count_match = 0;
            for(var sa = 0; sa <srch_array_lengh; sa++)
            {
               if (list_option[lo].toLowerCase().indexOf(srch_array[sa]) >= 0)
               {
                 count_match++;
               }
            }
            if(count_match == srch_array_lengh)
            {
                 final_list_option.push(list_option[lo]);
            }
         }
         $("#campaign_list_chosen").find("ul").html('');
         for(var fo = 0; fo < final_list_option.length; fo++)
         {
           final_list = final_list + '<li class="active-result" style="" data-option-array-index="1">'+final_list_option[fo]+'</li>';
         }
         $(".chosen-results").html(final_list);
       });
});

如您所见，我有一个代码

$("#campaign_list_chosen").find("input").on('keyup',
            function()
            {
              var final_list = '';
              var srch_array = new Array();
              var srch_option = new Array();
              var list_option = new Array();
              var str_srch = $(this).val();
              var final_list_option = new Array();    
              srch_array = str_srch.split("");
              var srch_array_lengh = srch_array.length;    
              $("#campaign_list option").each(function()
              {
                   list_option.push($(this).val());
              });
              for(var lo = 0; lo < list_option.length; lo++)
              {
                var count_match = 0;
                for(var sa = 0; sa <srch_array_lengh; sa++)
                {
                   if (list_option[lo].toLowerCase().indexOf(srch_array[sa]) >= 0)
                   {
                     count_match++;
                   }
                }
                if(count_match == srch_array_lengh)
                {
                     final_list_option.push(list_option[lo]);
                }
             }
             $("#campaign_list_chosen").find("ul").html('');
             for(var fo = 0; fo < final_list_option.length; fo++)
             {
               final_list = final_list + '<li class="active-result" style="" data-option-array-index="1">'+final_list_option[fo]+'</li>';
             }
             $(".chosen-results").html(final_list);
           });

现在，如果我有两个使这个东西适用于两个下拉列表，那么我需要使用不同的id编写这个代码两次。

我想做的就是创建一个函数，我可以传递下拉列表的id，以便该函数将使用此代码片段根据作为参数传递的id运行它。

Answer 1

以下是名为 commonFunctionToUpdateDD 的常用函数，您可以将其用于两个下拉列表。它需要两个参数。首先是选择元素ID，第二个是下拉列表搜索框的jQuery对象。

 $("#campaign_list_chosen").find("input").on('keyup',function(){
commonFunctionToUpdateDD('campaign_list',$(this));
});

    $("#camp_list_chosen").find("input").on('keyup',function(){
commonFunctionToUpdateDD('camp_list',$(this));
});

    function commonFunctionToUpdateDD(ddId,txtSearch)
    {

            var final_list = '';
var srch_array = new Array();
var srch_option = new Array();
var list_option = new Array();
var str_srch = txtSearch.val();
var final_list_option = new Array();    
srch_array = str_srch.split("");
var srch_array_lengh = srch_array.length;    
$("#"+ddId+" option").each(function()
{
    list_option.push(txtSearch.val());
});
for(var lo = 0; lo < list_option.length; lo++)
{
  var count_match = 0;
  for(var sa = 0; sa <srch_array_lengh; sa++)
  {
   if (list_option[lo].toLowerCase().indexOf(srch_array[sa]) >= 0)
   {
       count_match++;
   }
  }
  if(count_match == srch_array_lengh)
   {
       final_list_option.push(list_option[lo]);
   }
}
$("#"+ddId+"_chosen").find("ul").html('');
for(var fo = 0; fo < final_list_option.length; fo++)
{
  final_list = final_list + '<li class="active-result" style="" data-option-array-index="1">'+final_list_option[fo]+'</li>';
}
$(".chosen-results").html(final_list);

    }

创建自定义函数以在函数完全多个选定的下拉列表上运行

1 个答案: