javascript - 如何将值附加到隐藏字段？

Question

我有一个隐藏的字段，它会动态添加以跟踪另一个选择框的所选项目。

例如:

    hidden_field_name= count_select;

    select_box_name = select1;

当用户单击“添加”按钮时，两者都会动态添加。现在我想将每个实例的 select1 的选定项目计数存储在 count_select 中。

但是当我使用 val() 方法时，它会在 count_select 值中写入总点击次数。

这里是代码:

HTML 代码:

function getCount() {
  top.count = $("select.container_countable option:selected[value!='']").length;
  $('.countable').val(top.count);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='hidden' class='countable' id='count_containerfilter' name='countable_cont' value=0>
<select onclick='getCount()' class='container_countable' multiple='multiple' name='new_containerfilter'>

知道为什么会发生这种情况吗？

Answer 1

基于您的this comment above :

what I want to achieve is : select_box = 2 item selected ,newly added select box = 3 item selected , so finally count_select should contain count_select = [2, 3]....

您可以使用数组来跟踪选择。完成后，要么将该数组直接分配给隐藏输入，要么将其字符串化并分配字符串。

查看此代码段:

var tmp = [];
$("select.countable").on("change", function() {
    tmp = [];
    $("select.countable").each(function() {
        var ctr = $(this).find("option:selected").length;
        tmp.push(ctr);
    });
    $("#ctr").val(JSON.stringify(tmp));
    $("#result").text($("#ctr").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='hidden' id='ctr' />
<hr/>
<select class="countable" multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>
<select class="countable" multiple>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
</select>
<hr/>
<p id="result"></p>

这里有一个 fiddle 供您玩: http://jsfiddle.net/abhitalks/f6o3ped8/1/

尝试添加更多选择并查看结果。

.