เพื่อนๆ ครับ ผมพยายามถ่ายค่าจาก textbox ไป dropdownlist แต่ไม่สำเร็จ ขั้นตอนเป็นดังนี้ครับ (อธิบายได้ตามรูป)

1. จากแถวที่ 1 ลองป้อนค่า "aaa" แล้ว click ปุ่ม "+"
2. จากแถวที่ 2 ลองป้อนค่า "bbb" แล้ว click ปุ่ม "+"
3. click ปุ่ม "refresh key drivers" เพื่อให้ update ค่าไปยัง dropdownlist
4. ปัญหาคือ ค่าที่แสดงใน dropdownlist คือ "aaa" และ "aaa" (ต้องการให้เป็น "aaa" และ "bbb" จาก textbox)

แก้ไงดี ฮือๆ ... source code ตามที่แนบมาเลยครับ



===================================

<script type="text/javascript">
var steepUpdateTimer;
var keyin = [];

$(document).ready(function() {
    $(document).on('click', 'table.steep_m_key_drivers .addnewrow', steep_m_key_addNewRow);
    
    $(document).on('keyup', 'table.steep_m_key_drivers', function() {
        if(steepUpdateTimer) {
            clearTimeout(steepUpdateTimer);
        }
        steepUpdateTimer = setTimeout(function() {
            marketopp_updateSelect();
        }, 800);
    });    
});

function steep_m_key_addNewRow() {
    var thisElem = $(this);
    var thisRow = thisElem.parents('tr');

    var valid = autoValidate($('table.steep_m_key_drivers .req'));
    if(!valid) return;
          
    var tr = $('<tr class="full"></tr>');
    tr.html($('table.steep_m_key_drivers tbody > tr:eq(0)').html());

    thisRow.after(tr);
    
    keyin.push(document.getElementById("keyin").value);    
}

function refresh_keydriver(){
        $('select#keyout').empty();
                    
        for (i = 0; i < keyin.length; i++){
            $('select#keyout').append('<option>' + keyin + '</option>');
        }
}
</script>



<table id="table_smkd" name="steep_m_key_drivers" class="steep_m_key_drivers table table-bordered table-striped">
    <thead>
        <tr>
            <th rowspan="2">Key Drivers <span class="red">*</span></th>
            <th class="icon" rowspan="2">&nbsp;</th>
        </tr>
    </thead>
    <tbody>  
        <tr class="full">
            <td>
                <input type="text" name="steep_m_key_driver[]" class="steep_m_key_driver req" id="keyin" />
            </td>
            <td class="icon">
                <a href="javascript:void(0);" class="addnewrow"><i class="fa fa-plus fa-lg"></i></a>
            </td>
        </tr>
    </tbody>
</table>

<div class="row clearfix" id="steepblock">
    <div class="col-sm-12">
        <p><a class="btn btn-primary refresh" href="javascript:void(0);" onclick="refresh_keydriver()">Refresh Key Drivers</a></p>
    </div>
</div>

<table name="steep_m_sub_drivers" class="steep_m_sub_drivers table table-bordered table-striped">
    <thead>
        <tr>
            <th rowspan="2">Key Drivers</th>
            <th rowspan="2">Sub Drivers<span class="red">*</span></th>            
            <th rowspan="2" class="icon">&nbsp;</th>
        </tr>
    </thead>
    <tbody>
        <tr class="full">
               <td>
                <select name="steep_m_sub_keydriver[]" class="steep_m_sub_keydriver req" id="keyout" />
            </td>
            <td>
                <input type="text" name="steep_m_sub_driver[]" class="steep_m_sub_driver req" id="subin" />
            </td>
        </tr>
    </tbody>
</table>