숨겨진 양식 필드에 배열 값 추가

Question

나중에 드롭 다운 메뉴를 내 트리거로 사용하여 처리하기 위해 쉼표로 구분 된 값을 숨겨진 양식 필드에 추가하려고합니다.

I가 관리 할 수있는 최고의

$("#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=[];을 이벤트에서 제외하십시오. 당신이 배열에서 쉼표로 구분 된 문자열을 얻을 수 Array.prototype.join를 사용할 수있는 마지막 줄에

var allids=[]; 

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

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

.

id 속성이없는 옵션이 html에있는 경우 .attr("id")을 사용하는 이유를 잘 모릅니다. 당신이 이드가 아닌 가치를 원하는 것처럼 보입니다.

Answer 2

두 가지 문제가 있습니다.

먼저 사용자가 메뉴에서 선택할 때마다 allids이 비어 있습니다. 그래서 당신이 그것을 누를 때, 당신은 오래된 가치를 잃고, 당신은 단지 가장 최근의 가치를 얻습니다.

둘째로, $(allids).append(allids + ", ")은 당신이 생각하는대로하지 않습니다. .append()은 문자열을 연결하지 않고 DOM 요소에 무언가를 추가하기위한 것입니다.

<select>의 값을 얻으려면 $(this).val()을 사용하면 을 검색 할 필요가 없습니다. <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>