jquery가 추가 된 2 개의 다른 선택 옵션 처리

초보자

먼저이 질문에 감사드립니다 https://stackoverflow.com/questions/14792014/select-option-which-were-just-appended-with-jquery

SQL 결과에 대한 옵션 값이 한 페이지에 두 개 선택되어있을 때 또 다른 문제가 있습니다.

여기에 기본 페이지로 내 코드

    <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>

두 개의 선택 옵션 <select id="pkategori"><select id="pname">. 이제 편집 버튼의 경우 아래와 같이 ajax를 사용하여 사용 가능한 데이터를 호출합니다.

    $("#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();
     }
     }
    });
    });

url: "aksi.php","|"내가 사용하여 데이터를 분할합니다. 내가 먼저 연결 한 질문에 따르면. 옵션 값을 추가 <select id="pkategori">하고이를 기본값으로 설정했습니다.

하지만 두 번째 옵션에 동일한 코드를 사용하면 <select id="pname">오류가 발생하고 분할 한 데이터가 표시되지 않습니다. 그래서 내가 붙어, 무슨 문제?

Andriansyah

실제로 귀하의 링크가 답을 가지고 있습니다. 코드에는 비슷한 var가 있습니다. "데이터"에 대한 의미는 충돌을 유발합니다. Jquery는 데이터를 바인딩하는 데 혼동을 주므로 data = msg.split("|");다른 이름 변수로 변경 하면됩니다.

귀하의 코드는 다음과 같습니다

$("#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();
     }
     }
    });
    });

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

JQuery는 7 개의 다른 선택에 대해 동적으로 선택하는 옵션을 추가합니다.

분류에서Dev

Javascript / jQuery에서 선택 드롭 다운의 동적으로 추가 된 옵션을 선택 (트리거 변경)합니다.

분류에서Dev

옵션 선택에 다른 값 추가

분류에서Dev

jquery의 선택 옵션에서 두 개의 다른 배열 값 추가 (텍스트 및 값)

분류에서Dev

Angular-UI의 AngularJS 및 select2 : 사용자가 선택한 것과 다른 선택 옵션

분류에서Dev

2 개의 선택기 (jQuery)와 다른 추가 클래스가있는 모든 항목을 선택합니다.

분류에서Dev

다른 드롭 다운 옵션 선택시 1 개의 드롭 다운에서 선택 옵션을 추가 / 제거하는 방법

분류에서Dev

드롭 다운의 현재 선택된 옵션 앞에 옵션 텍스트를 가져옵니다.

분류에서Dev

다른 옵션을 선택할 때 DDL의 '선택된'속성을 변경하고 jQuery로 미리 선택된 기본 값을 제거하는 방법

분류에서Dev

선택 상자의 옵션 중 하나에 다른 결과 추가

분류에서Dev

jquery는 필드의 선택 옵션을 다른 필드에 추가하지 않습니다.

분류에서Dev

다중 선택에 옵션 추가

분류에서Dev

미리 정의 된 가격을 표시하려면 드롭 다운 옵션을 선택하세요.

분류에서Dev

사용자가 하나의 옵션을 선택하면 다른 옵션을 선택할 수 없습니다.

분류에서Dev

추가 된 선택 메뉴에서 선택 옵션 제거

분류에서Dev

jquery는 여러 선택 상자의 선택된 값을 가져옵니다.

분류에서Dev

드롭 다운의 선택된 옵션 속성 만 가져 오기

분류에서Dev

옵션이 다른 두 개의 jQuery UI 날짜 선택기

분류에서Dev

동적으로 추가 된 선택 옵션 요소의 이름 변경

분류에서Dev

다른 옵션 선택시 입력 상자 추가 방법

분류에서Dev

2 개의 선택 태그가있는 양식을 만들고이 선택의 요소를 다른 선택에 추가하고 양식 제출을 처리하는 방법은 무엇입니까?

분류에서Dev

HTML 선택 옵션 : 다른 옵션 라인을 추가하는 방법

분류에서Dev

jquery에서 동적으로 추가 된 선택 상자 및 텍스트 상자의 값을 가져옵니다.

분류에서Dev

Angularjs 두 개의 선택 상자가 하나의 모델 객체에 연결됨-선택된 옵션

분류에서Dev

JQuery를 사용하여 SELECT의 선택된 옵션 텍스트 가져 오기

분류에서Dev

선택할 옵션 추가-다중 선택

분류에서Dev

하나의 옵션을 선택해야한다는 API에서 선택 옵션을 가져옵니다.

분류에서Dev

jquery 옵션에 여러 개의 선택된 true 적용

분류에서Dev

JFace TableViewer는 여러 개의 선택된 행을 가져옵니다.

Related 관련 기사

  1. 1

    JQuery는 7 개의 다른 선택에 대해 동적으로 선택하는 옵션을 추가합니다.

  2. 2

    Javascript / jQuery에서 선택 드롭 다운의 동적으로 추가 된 옵션을 선택 (트리거 변경)합니다.

  3. 3

    옵션 선택에 다른 값 추가

  4. 4

    jquery의 선택 옵션에서 두 개의 다른 배열 값 추가 (텍스트 및 값)

  5. 5

    Angular-UI의 AngularJS 및 select2 : 사용자가 선택한 것과 다른 선택 옵션

  6. 6

    2 개의 선택기 (jQuery)와 다른 추가 클래스가있는 모든 항목을 선택합니다.

  7. 7

    다른 드롭 다운 옵션 선택시 1 개의 드롭 다운에서 선택 옵션을 추가 / 제거하는 방법

  8. 8

    드롭 다운의 현재 선택된 옵션 앞에 옵션 텍스트를 가져옵니다.

  9. 9

    다른 옵션을 선택할 때 DDL의 '선택된'속성을 변경하고 jQuery로 미리 선택된 기본 값을 제거하는 방법

  10. 10

    선택 상자의 옵션 중 하나에 다른 결과 추가

  11. 11

    jquery는 필드의 선택 옵션을 다른 필드에 추가하지 않습니다.

  12. 12

    다중 선택에 옵션 추가

  13. 13

    미리 정의 된 가격을 표시하려면 드롭 다운 옵션을 선택하세요.

  14. 14

    사용자가 하나의 옵션을 선택하면 다른 옵션을 선택할 수 없습니다.

  15. 15

    추가 된 선택 메뉴에서 선택 옵션 제거

  16. 16

    jquery는 여러 선택 상자의 선택된 값을 가져옵니다.

  17. 17

    드롭 다운의 선택된 옵션 속성 만 가져 오기

  18. 18

    옵션이 다른 두 개의 jQuery UI 날짜 선택기

  19. 19

    동적으로 추가 된 선택 옵션 요소의 이름 변경

  20. 20

    다른 옵션 선택시 입력 상자 추가 방법

  21. 21

    2 개의 선택 태그가있는 양식을 만들고이 선택의 요소를 다른 선택에 추가하고 양식 제출을 처리하는 방법은 무엇입니까?

  22. 22

    HTML 선택 옵션 : 다른 옵션 라인을 추가하는 방법

  23. 23

    jquery에서 동적으로 추가 된 선택 상자 및 텍스트 상자의 값을 가져옵니다.

  24. 24

    Angularjs 두 개의 선택 상자가 하나의 모델 객체에 연결됨-선택된 옵션

  25. 25

    JQuery를 사용하여 SELECT의 선택된 옵션 텍스트 가져 오기

  26. 26

    선택할 옵션 추가-다중 선택

  27. 27

    하나의 옵션을 선택해야한다는 API에서 선택 옵션을 가져옵니다.

  28. 28

    jquery 옵션에 여러 개의 선택된 true 적용

  29. 29

    JFace TableViewer는 여러 개의 선택된 행을 가져옵니다.

뜨겁다태그

보관