点击更新输入值字段并检查是否存在答案

【问题标题】：Update input value field on click and checking if exists点击更新输入值字段并检查是否存在
【发布时间】：2015-10-14 13:42:22
【问题描述】：

我正在尝试根据用户选择的选项更新输入字段的值。因此，如果他们选择“教育”选项，它会将其添加到输入值字段中。如果他们再次选择相同的选项，它将被删除。他们可以根据需要添加任意数量的选项。我有点坚持两件事：

如果他们添加了多个选项，是否可以用逗号分隔这些值？
如果他们再次选择相同的选项但添加了其他选项，是否会仅删除该选项并保留其余选项？

有什么帮助吗？这就是我到目前为止所拥有的。我已经设置了一个可能有帮助的 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();
    });

【问题讨论】：

标签： jquery input

【解决方案1】：

也许你必须从不同的角度来解决这个问题。 :)

我大量更改了您的代码。我使用一个数组来存储选定的值，并将选定的值存储在.data() 的输入中。使用 .join() 以逗号连接值。 $.inArray 帮助在数组中查找值。所以如果存在我可以删除，如果没有我可以添加。

这是最终代码。您必须自己实现“All”程序的代码。

$(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">
                            	<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">
                            	<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">
                            	<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>

【讨论】：

这真的很棒而且很容易理解。感谢您在这方面给我时间。我对“全部”的想法是，如果选择它，它会清除所有值。我也需要考虑一下“活跃”课程是如何运作的。
太棒了。您可以直接使用$this.toggleClass('active') 将active 类添加/删除到a 元素或$li.toggleClass('active') 用于li 元素。如果我的回答已经回答了你的问题，请不要忘记点击answer旁边的复选标记。

【解决方案2】：

您可以使用选定的值创建一个数组，然后使用indexOf 检查该值是否已被选定。您也可以使用join 创建一个以逗号分隔的字符串。

【讨论】：