更新下拉列表的内容 Javascript/PHP答案

【问题标题】：Updating the contents of a dropdown list Javascript/PHP更新下拉列表的内容 Javascript/PHP
【发布时间】：2011-03-13 02:25:12
【问题描述】：

我是 Javascript/Jquery 新手，正在努力解决某个问题。

在将作业添加到数据库的过程中，用户可以选择使用新选项更新下拉列表的内容。添加新选项是通过一个灰盒处理的，该灰盒将使用 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);  
        }  
    });  
}

它工作......有时。极不稳定。还有一个与页面上其他脚本冲突的坏习惯。（主要是灰盒）

在此阶段将采纳任何建议。 :X

【问题讨论】：

您有任何代码示例吗？到目前为止，您尝试过什么？
它工作...有时。极不稳定。还有一个与页面上其他脚本冲突的坏习惯。（主要是灰盒）在这个阶段任何建议都会被采纳。 :X

标签： php javascript jquery mysql drop-down-menu

【解决方案1】：

使用 ajax 将数据发布到您的 php 文件，将新下拉列表的 html 回显到 javascript，然后使用 jquery 放入新内容。 http://api.jquery.com/jQuery.ajax/

【讨论】：

【解决方案2】：

假设您使用 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 代码：应该包含在 $(document).ready(function(){ });阻止以确保按钮已准备好接受事件

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

【讨论】：

这看起来很热。 :] 我现在要试试。 n.n
让我知道它是怎么回事，需要注意的一点是通过 php 代码返回的值的数据结构。如果您不使用关联数组，则需要将 data[i].id & data[i].label 更改为 data[i][0] & data[i][1] 等
我对这一切有点陌生......但据我了解，我将 #refreshButtonID() 函数附加到超链接上的 onclick 上？ php 文件中的 SQL 查询返回一个如下所示的数组 - Array([id] => brand [id] => brand ....etc ) 拼命地尝试跟上 Jquery 的速度，非常感谢您的帮助!
另外，代码检查员说行中有错误~"dropdown.append(...etc)。我无法追踪它。我逐字逐句复制了你的。
啊，是的，我的错，在 dropdown.append 行的末尾附近缺少 ) 所以它应该是 dropdown.append( $('') );

【解决方案3】：

没有示例代码，但我猜是这样的

发布后，创建回调更新 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）

【讨论】：