handling 2 different select option which were just appended with jquery

Question

first thank to this question https://stackoverflow.com/questions/14792014/select-option-which-were-just-appended-with-jquery

i have another problem when option value from spilting data on sql result there are two select in one page.

Here my code as default page

    <div>
    Warehouse Product
  <br><input type="text" id="wh" readonly/>WHK</br>
    </br>
    Nomor Rak
         <br><input type="text" id="posisi" readonly/></br>
    Product Kategori
         <br><select id="pkategori">
         <option selected = "selected" value = "option1">-Kategori Produk-</option>
                <?php
                $q = mssql_query("SELECT DISTINCT ProductCategory from tblMstProductUHT1"); 

                while ($r = mssql_fetch_array($q)){
                echo "<option value='$r[ProductCategory]'>$r[ProductCategory]</option>";
            }?>
            </select>
        </br>
    Nama Produk
        <br><select id="pname">
        <option selected = "selected" value="option1" >-Nama Produk-</option>
        <?php
                $q = mssql_query("SELECT DISTINCT ProductName from tblMstProductUHT1"); 

                while ($r = mssql_fetch_array($q)){
                echo "<option  value='$r[ProductName]'>$r[ProductName]</option>";
            }?>
         </select>
        </br>
    Kode Produksi
    <br><input type='text' id="pdate"></br>
    Line/FM
    <br><input type='text' id="line"></br>
    Nomor Palet
         <br><input type="text" id="pnumber"/>
         </br>
    Nomor Seri Produk
    <br><input type='text' id="seri"></br>
    Quantity(Carton)
    <br><input type='text' id="quantity"></br>
    <button id="save">Save</button>
    <button id="edit">Edit</button>
    <button id="view">View</button>
    <button id="delete">Delete</button>
    </div>

you see there two select option <select id="pkategori"> and <select id="pname">. Now for Edit button i call available data using ajax like below

    $("#edit").click(function(){
    posisi = $("#posisi").val();
    $.ajax({
            type:'POST',
            url: "aksi.php",
            data: "op=edit&posisi="+posisi,
            cache: false,
            success: function(msg){
    if(msg=="error"){
    $(".status").html("<font color='##480000'><strong> Data tidak ditemukan..! </strong></font>");
    }
    else{
    //karna di server pembatas setiap data adalah |
        //maka kita split dan akan membentuk array
        data = msg.split("|");            
    //masukkan ke masing-masing textfield
     var r = [data[0]];
    options = [{id:0, value:r}];
    for(var i = 0; i < options.length; i++) {
        var data = options[i];
        var option = $('<option id="pkategoriOption_' + data['id'] + '" class="pkategori" value="' + data['value'] + '">' + data['value'] + '</option>');
        $('#pkategori').append(option);     
    }
$("#pkategori .pkategori:first").prop('selected', true);

    var s = [data[1]];
    options = [{id:0, value:s}];
    for(var i = 0; i < options.length; i++) {
        var data = options[i];
        var option = $('<option id="pnameOption_' + data['id'] + '" class="pname" value="' + data['value'] + '">' + data['value'] + '</option>');
        $('#pname').append(option);     
    }
$("#pname .pname:first").prop('selected', true);

     $("#pdate").val(data[2]);
     $("#pnumber").val(data[3]);
     $("#seri").val(data[4]);
     $("#quantity").val(data[5]);
     $("#line").val(data[6]);  
     //hilangkan status dan animasi loading
     $(".status").html("");
     $(".loading").hide();
     }
     }
    });
    });

on url: "aksi.php", i split data using "|". According to the question that i linked in first. I succesfull append option value on <select id="pkategori"> and set this as default selected.

But when i use the same code for the second option <select id="pname"> it's caused error and data that i split doesn't show. so i stuck, what the problem?

Answer 1

actually your linked have the answer. in your code you just have similar var. mean on "data", it's cause conflict. Jquery will confuse to bind data, so you just change data = msg.split("|"); to another name variable.

Your code will be like below

$("#edit").click(function(){
    posisi = $("#posisi").val();
    $.ajax({
            type:'POST',
            url: "aksi.php",
            data: "op=edit&posisi="+posisi,
            cache: false,
            success: function(msg){
    if(msg=="error"){
    $(".status").html("<font color='##480000'><strong> Data tidak ditemukan..! </strong></font>");
    }
    else{
    //karna di server pembatas setiap data adalah |
        //maka kita split dan akan membentuk array
        da = msg.split("|"); // it can be another variable name           
    //masukkan ke masing-masing textfield
     var r = [da[0]];
    options = [{id:0, value:r}];
    for(var i = 0; i < options.length; i++) {
        var data = options[i];
        var option = $('<option id="pkategoriOption_' + data['id'] + '" class="pkategori" value="' + data['value'] + '">' + data['value'] + '</option>');
        $('#pkategori').append(option);     
    }
$("#pkategori .pkategori:first").prop('selected', true);

    var s = [da[1]];
    options = [{id:0, value:s}];
    for(var i = 0; i < options.length; i++) {
        var data = options[i];
        var option = $('<option id="pnameOption_' + data['id'] + '" class="pname" value="' + data['value'] + '">' + data['value'] + '</option>');
        $('#pname').append(option);     
    }
$("#pname .pname:first").prop('selected', true);

     $("#pdate").val(da[2]);
     $("#pnumber").val(da[3]);
     $("#seri").val(da[4]);
     $("#quantity").val(da[5]);
     $("#line").val(da[6]);  
     //hilangkan status dan animasi loading
     $(".status").html("");
     $(".loading").hide();
     }
     }
    });
    });