Question

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

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

有任何帮助吗？这就是我到目前为止所拥有的。我设置了一个可能有帮助的jsFiddle？感谢。

$extraparam="toto";
onclick="_gaq.push([\'_trackEvent\',\'fbsharbar\',\'clicked-5\',\''.$extraparam.'\'])"

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

Answer 2

您可以使用所选值创建数组，然后使用indexOf检查是否已选择该值。您还可以使用join创建以逗号分隔的字符串。

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

2 个答案: