更新下拉列表的內容Javascript/PHP

我是新來的Javascript/jquery和掙扎與某個問題。更新下拉列表的內容Javascript/PHP

在將作業添加到數據庫的過程中，用戶可以選擇使用新選項更新下拉列表的內容。添加新的選項是通過一個greybox來處理的，它使用PHP將數據發佈到數據庫。

添加新選項後，它不會顯示在下拉列表中。因此，他們需要能夠點擊一個按鈕來刷新下拉列表的內容。有沒有人以前完成過這個，可以給我看一些示例源代碼？還是有這個問題更優雅的解決方案？

我一直在研究幾乎不停，並找不到解決方案，任何幫助表示讚賞。 N，N-

編輯：

<script type="text/javascript"> 
function getbrands(){ 
    new Ajax.Request('ajax/brand.php',{ 
     method: 'get', 
     onSuccess: function(transport){ 
      var response = transport.responseText; 
      $("brand").update(response); 
     } 
    }); 
}

它的工作原理...有時。非常不穩定。還有一個壞習慣與頁面上的其他腳本衝突。（主要是greybox）

在這個階段，任何建議都將被採納。：X

來源

2010-07-07 Linnay

你有任何代碼樣本？你試過什麼了？ – 2010-07-07 23:52:24

<腳本類型= 「文本/ JavaScript的」> 功能getbrands（）{ 新的Ajax.Request（ 'AJAX/brand.php'，{ 方法： '得到'，的onSuccess：功能（傳輸）{ VAR響應=運輸。responseText的; $（「brand」）。update（response）; } }）; } 它有效...有時。非常不穩定。還有一個壞習慣與頁面上的其他腳本衝突。（主要是greybox）在這個階段，任何建議都將被採納。：X – Linnay 2010-07-08 00:11:51

假設你使用jQuery，你可以做到以下幾點..

//in a php file that your gonna use to fetch new dropdown values 
<?php //pathToPhpFile.php 
    header("Content-Type: application/json"); 

    //here you'd perform a database query 
    //heres a dummy dataset 
    $data = array( 
     array("id" => "dropdown1", "label" => "Dropdown #1"), 
     array("id" => "dropdown2", "label" => "Dropdown #2"), 
    ); 

    echo json_encode($data); 
    exit; 
?>

javascript代碼：前人的精力被包裹在$（文件）。就緒（函數（）{}）;塊，以確保該按鈕準備接受事件

//attach refresh event to button 
$("#refeshButtonId").click(function() { 

    var dropdown = $('#idOfTheDropdown'); 

    //fetch the key/values pairs from the php script 
    jQuery.getJSON("pathToPhpFile.php", function(data) { 

     //empty out the existing options 
     dropdown.empty(); 

     //append the values to the drop down 
     jQuery.each(data, function(i, v) { 
      dropdown.append($('<option value="'+ data[i].id +'">'+data[i].label+'</option>'); 
     }); 
    }); 

});

精緻代碼:)

<script type="text/javascript"> 
    $(document).ready(function(){ 

     $("#refeshButtonId").click(function() { 

      //fetch the key/values pairs from the php script 
      jQuery.getJSON("pathToPhpFile.php", function(data) { 

       var dropdown = $('#idOfTheDropdown'); 

       //empty out the existing options 
       dropdown.empty(); 

       //append the values to the drop down 
       jQuery.each(data, function(i, v) { 
        dropdown.append($('<option value="'+ i +'">'+ v +'</option>')); 
       }); 
      }); 

     });  
    }); 
</script>

來源

2010-07-08 00:27:27 Okeydoke

看起來很熱。：] 我現在要試一試。 n.n – Linnay 2010-07-08 00:29:33

讓我知道它是怎麼回事，有一點需要注意的是通過php代碼返回的值的數據結構。如果您不使用關聯陣列，您需要將數據[i] .id和數據[i]。標籤更改爲 data [i] [0]＆data [i] [1]等 – Okeydoke 2010-07-08 00:35:35

我是a所有這一切都是新的......但從我的理解，我將#refreshButtonID（）函數附加到超鏈接上的onclick？在php文件中的SQL查詢返回一個如下所示的數組：Array（[id] => brand [id] => brand ....等）拼命地試圖用Jquery來加快速度，所以你的非常感謝幫助！ – Linnay 2010-07-08 00:51:56

使用ajax將數據發佈到您的php文件，將新的下拉列表的html回顯回到javascript，然後使用jquery添加新內容。 http://api.jquery.com/jQuery.ajax/

來源

2010-07-08 00:13:13 sgrif

沒有樣本代碼，但我想它是這樣的

，創建一個回調，更新的DOM，尤其選項的選擇框

也許它像這樣在代碼 jquery：

$.ajax({ 
    method: 'POST', 
    data : $('#newjobfield').val(), 
    dataType: 'text' 
    success : function(data){ 
    $('#selectbox').append('<option value="' + data + '">' + data + '</option>') 
    } 
});

在PHP

function getNew() 
{ 
if ($_POST) 
{ 
    // update database 
    // then echo the record's 'name' (or whatever field you have in there) 
    echo $newInsertedJobName; 
    } 
    die(); 
}

下面這段代碼太爛了，所以只是告訴我，如果事情不工作（我沒有測試過，因爲我幾分鐘前做到了，而在工作中：P）

來源

2010-07-08 00:15:28 yretuta

更新下拉列表的內容Javascript/PHP

回答

相關問題