Блог

Я пытаюсь добавить значения, разделенные запятыми, в поле скрытой формы для последующей обработки, используя изменение выпадающего меню в качестве триггера.

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

Лучшее, что я могу сделать, это изменить значение на выбранный выпадающий список, но это не добавит их вместе с запятыми.

Выйдите var allids=[]; из события, потому что вы уничтожаете его каждый раз, когда оно запускается.

 var allids=[];

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

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

В последней строке вы можете использовать Array.prototype.join, чтобы получить из массива строку, разделенную запятой.

Не уверен, почему вы используете .attr("id") , когда ваш html показывает ваши параметры без атрибута id. Похоже, вам нужно значение, а не идентификатор.

У вас две проблемы.

Во-первых, вы очищаете его allids каждый раз, когда пользователь выбирает из меню. Поэтому, когда вы нажимаете на него, вы теряете старые значения и просто получаете самое последнее значение.

Во-вторых, $(allids).append(allids ", ") делает не то, что вы думаете. .append() предназначен для добавления чего-либо к элементу DOM, а не для объединения строк.

Чтобы получить значение a <select> , просто используйте $(this).val() , вам не нужно искать :selected . У ваших <option> элементов нет идентификаторов, поэтому .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>