Question

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

例如：

    hidden_field_name= count_select;

    select_box_name = select1;

当用户点击＆＃34;添加＆＃34>时，两者都会动态添加。按钮。现在我想在count_select中为每个实例存储select1的所选项目计数。

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

这是代码：

Html代码：

＆＃13;

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

＆＃13;

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

＆＃13;

知道为什么会这样吗？

Answer 1

根据您的this comment above：

我想要实现的是：select_box = 2项选择，新添加 select box = 3 item selected，所以最后count_select应该包含 count_select = [2,3] ....

您可以使用数组来跟踪选择。完成后，将该数组直接分配给hidden input或stringify并分配字符串。

请参阅此代码段：

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>

以下是您的小提琴： http://jsfiddle.net/abhitalks/f6o3ped8/1/

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

Answer 2

This code is from jQuery docs for :selected（稍加修改）：

＆＃13;

$("select")
  .change(function() {
    var count = $("select option:selected").length; // Count selected
    $("input").val(count);                          // Update field
  })
  .trigger("change");                               // Trigger at least once

＆＃13;

select{
  height:100px;
  width:100px;
}

＆＃13;

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<select name="garden" multiple="multiple">
  <option>Flowers</option>
  <option>Shrubs</option>
  <option>Trees</option>
  <option selected="selected">Bushes</option>
  <option>Grass</option>
  <option selected="selected">Dirt</option>
</select>
<input />

＆＃13;

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

2 个答案: