Question

我正在尝试将逗号分隔值添加到隐藏的表单字段，以便稍后使用下拉菜单更改作为我的触发器进行处理。

$("#artistselect").change(function() {
  var allids = [];

  allids.push($(this).children(":selected").attr("id"));

  $("input[name=artistslist]").attr("value", $(allids).append(allids + ", "));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="artistselect">
    <option value="1">1</option>
    <option value="1">1</option>
    <option value="1">1</option>
  </select>
  <input type="hidden" name="artistslist" value="" />
</form>

我能管理的最好的方法是将值更改为所选的下拉列表，但它不会将它们与逗号一起添加。

Answer 1

将var allids=[];移出活动，因为您每次发生时都会将其销毁。

var allids=[];

$("#artistselect").change(function() {
    allids.push($(this).children(":selected").attr("id"));

     $("input[name=artistslist]").val(allids.join(', '));
});

在最后一行，您可以使用Array.prototype.join从数组中获取逗号分隔的字符串。

当您的html显示没有id属性的选项时，不确定为什么使用.attr("id")。看起来你想要的价值不是id。

Answer 2

你有两个问题。

首先，每次用户从菜单中选择时，您都会清空allids。因此，当您按下它时，您将丢失旧值，并且您只获得最新值。

其次，$(allids).append(allids + ", ")没有按照您的想法行事。 .append()用于向DOM元素添加内容，而不是连接字符串。

要获取<select>的值，只需使用$(this).val()，您就不需要搜索:selected。您的<option>元素没有ID，因此.attr('id')不会返回任何内容。

var allids = [];
$("#artistselect").change(function() {
  allids.push($(this).val());
  $("input[name=artistslist]").val(allids.join(", "));
});

$("#show").click(function() {
    console.log($("input[name=artistslist]").val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select id="artistselect">
    <option value="">Select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>
  <input type="hidden" name="artistslist" value="" />
  <button type="button" id="show">Show hidden value</button>
</form>

将数组值添加到隐藏的表单字段

2 个答案: