隠しフォームフィールドに配列値を追加

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=[];を移動してください。あなたは配列からカンマ区切りの文字列を取得するためにArray.prototype.joinを使用することができ、最後の行で

var allids=[]; 

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

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

。

あなたのhtmlがid属性のないオプションを表示する場合、.attr("id")をなぜ使用しているのかわかりません。 IDではない価値を求めているように見えます。

Answer 2

あなたには2つの問題があります。

まず、ユーザーがメニューから選択するたびにallidsを空にしています。あなたがそれを押すと、古い値が失われ、最新の値が得られます。

第2に、$(allids).append(allids + ", ")はあなたの考えをしません。 .append()は、文字列を連結するのではなく、DOM要素に何かを追加するためのものです。

<select>の値を取得するには、$(this).val()を使用するだけで:selectedを検索する必要はありません。 <option>要素にIDがないため、.attr('id')は何も返しません。 `allids.pushの目的は何

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>