2015-10-14 85 views
1

我试图根据用户选择的选项更新输入字段的值。所以,如果他们选择“教育”选项,它会将其添加到输入值字段。如果他们再次选择相同的选项,它会删除。他们可以根据需要添加尽可能多或更少的选项。我有点卡住了两件事:点击更新输入值字段并检查是否存在

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

回答

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>

+0

这是真正伟大的,明确的理解。我感谢你给我你的时间。我用'全部'的想法是,如果它被选中,它会清除所有的值。我需要考虑'积极'类如何工作。 –

+0

太好了。您可以直接使用'$ this.toggleClass('active')'为'li'元素的'a'元素或$ li.toggleClass('active')'添加/删除'active'类。如果我的答案回答了您的问题,请不要忘记点击[答案]旁边的复选标记(http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-工作/ 5235#5235)。 –

0

您可以创建所选值的数组,而且比使用indexOf如果已经选择的值来检查。您也可以使用join创建一个用逗号分隔的字符串。