このフィドルでは、値を選択すると、すべての入力フィールドに入力されます。私はこのフィドルでこれと同じ原理を使おうとしていますが、機能していません。理由がよくわかりませんか?
エラーは発生していませんが、以下のコードが間違った場所にあり、無視されているように感じますか?
jQuery('#newtable select').on('change', function() {
var div_id = 'div_'+jQuery(this).attr('id');
var select_val = jQuery(this).find('option:selected').data('value');
console.log();
if( select_val != '' ) {
var a = select_val.split(',');
var count = 0;
jQuery('tr#'+div_id+' .flag').each(function() {
jQuery(this).val(a[count]);
++count;
});
} else {
jQuery('tr#'+div_id+' input.input_text').val('');
}
});
2番目のフィドルで達成しようとしているのは、「Ryan $ 100」を選択すると、以下のコードが更新されるためです。
<table id="newtable">
<tr id='div_m2'>
<input type="hidden" class='input_text flag' value="0" name="id[]">
<input type="hidden" class='input_text flag' value="0" name="name[]">
<input type="hidden" class='input_text flag' value="0" name="sales[]">
<input type="hidden" class='input_text flag' value="0" name="price[]">
<td colspan="3">
<select id='m2'>
<option value="" data-value="">Choose Salesman</option>
<option value="0" data-value="id_03,Ryan,1,100">Ryan $100</option>
<option value="0" data-value="id_01,Tom,1,100">tom $100</option>
</select>
</td>
</tr>
</table>
これに
<input type="hidden" class='input_text flag' value="id_03" name="id[]">
<input type="hidden" class='input_text flag' value="Ryan" name="name[]">
<input type="hidden" class='input_text flag' value="1" name="sales[]">
<input type="hidden" class='input_text flag' value="100" name="price[]">
これを行うと、showValues()も実行され、上記のデータが生成しているテーブルに含まれるようになります。
したがって、ライアン$ 100を選択した場合の、テーブルに対する私の望ましい出力はです。
<table id="results">
<tbody>
<tr><th>Rank</th><th>Salesman</th><th>Products Sold</th><th>Total Sale Price</th><th>Commission (30% of Total Sale Price + 5 for each sale)</th></tr>
<tr data-id="id_03"><td>1</td><td>ryan</td><td>2</td><td>110</td><td>550.00</td></tr>
<tr data-id="id_02"><td>2</td><td>Jerry</td><td>3</td><td>60</td><td>300.00</td></tr>
<tr data-id="id_01"><td>3</td><td>Tom</td><td>5</td><td>50</td><td>250.00</td></tr>
</tbody>
</table>