點擊更新輸入值字段並檢查是否存在

Question

我試圖根據用戶選擇的選項更新輸入字段的值。所以，如果他們選擇「教育」選項，它會將其添加到輸入值字段。如果他們再次選擇相同的選項，它會刪除。他們可以根據需要添加儘可能多或更少的選項。我有點卡住了兩件事：

1. 如果他們添加多個選項，是否可以用逗號分隔這些值？
2. 如果他們再次選擇了相同的選項但添加了其他選項，它只會刪除該選項並保留其餘選項？

任何幫助？這是我迄今爲止所擁有的。我建立了一個jsFiddle，可能有幫助？謝謝。

https://jsfiddle.net/w1x9Lpho/

$(document).on('click touchstart', '.project-library-filters-container ul.project-sectors-list li a', function(e) { 
     $(this).each(function() { 
      $(this).parent('li').addClass('active'); 
      if ($(this).parent('li').is('active')) { 
       var dataName = ''; 
       $('input[name=project_sectors]').val($('input[name=project_sectors]').val() + dataName).serialize(); 
      } else { 
       var dataName = $(this).data('name'); 
       $('input[name=project_sectors]').val($('input[name=project_sectors]').val() + dataName).serialize(); 
      } 
     }); 
     e.preventDefault(); 
    }); 

Answer 1

也許你必須從另一個角度來處理問題。 :)

我大量更改您的代碼。我使用一個數組來存儲選定的值，並將輸入的所選值存儲在.data()中。用.join()用逗號分隔用逗號分隔的值。 $.inArray有助於在數組中找到值。所以如果存在，我可以刪除，如果沒有，我可以添加。

下面是最終代碼。你必須自己實現「全部」過程的代碼。

$(document).on('click touchstart', '.project-library-filters-container ul li a', function (e) { 
 
    e.preventDefault(); 
 
    var $this = $(this), 
 
     $li = $this.parent(), 
 
     $input = $li.parent().next(), 
 
     name = $this.data('name'), 
 
     data = $input.data('selected') || [], 
 
     idx = $.inArray(name, data); 
 
    if(idx >= 0) { 
 
     data.splice(idx, 1); 
 
    } 
 
    else { 
 
     data.push(name); 
 
    } 
 
    $input.data('selected', data).val(data.join(', ')); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="project-library-filters-container" id="project-library-filters"> 
 
    <div class="container-fluid"> 
 
     <form class="project-library-filter" action="/Freelance/levitt-bernstein/project-library-results/" method="get"> 
 
      <div class="row"> 
 
       <div class="filter-container clearfix"> 
 
        <div class="col-xs-12 col-sm-12 each-filter-set"> 
 
         <div class="inner"> 
 
          \t <h3>Show me &mdash;</h3> 
 

 
          <ul class="project-sectors-list list small clearfix"> 
 
           <li><a href="#">All</a> 
 
           </li> 
 
           <li><a href="#" data-name="architecture">Architecture</a> 
 
           </li> 
 
           <li><a href="#" data-name="landscape-design">Landscape Design</a> 
 
           </li> 
 
           <li><a href="#" data-name="urban-design">Urban Design</a> 
 
           </li> 
 
          </ul> 
 
          <input type="text" name="project_sectors" value="" /> 
 
         </div> 
 
        </div> 
 
        <div class="col-xs-12 col-sm-12 each-filter-set"> 
 
         <div class="inner"> 
 
          \t <h3>For &mdash;</h3> 
 

 
          <ul class="project-tags-list list small clearfix"> 
 
           <li><a href="#">All</a> 
 
           </li> 
 
           <li><a href="#" data-name="arts">Arts</a> 
 
           </li> 
 
           <li><a href="#" data-name="commercial">Commercial</a> 
 
           </li> 
 
           <li><a href="#" data-name="education">Education</a> 
 
           </li> 
 
           <li><a href="#" data-name="health">Health</a> 
 
           </li> 
 
           <li><a href="#" data-name="housing">Housing</a> 
 
           </li> 
 
          </ul> 
 
          <input type="text" name="project_tags" value="" /> 
 
         </div> 
 
        </div> 
 
        <div class="col-xs-12 col-sm-12 each-filter-set"> 
 
         <div class="inner"> 
 
          \t <h3>In &mdash;</h3> 
 

 
          <ul class="list small clearfix"> 
 
           <li><a href="#" data-name="bristol">Bristol</a> 
 
           </li> 
 
           <li><a href="#" data-name="london">London</a> 
 
           </li> 
 
           <li><a href="#" data-name="ucl">UCL</a> 
 
           </li> 
 
          </ul> 
 
          <input type="text" name="project_cities" value="" /> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="row"> 
 
        <div class="col-xs-12 col-sm-12"> 
 
         <button type="submit" name="submit">Go</button> 
 
        </div> 
 
       </div> 
 
      </div> 
 
    </div> 
 
</div> 
 
</div>

Answer 2

您可以創建所選值的數組，而且比使用indexOf如果已經選擇的值來檢查。您也可以使用join創建一個用逗號分隔的字符串。