Question

我是Javascript / Jquery的新手并且遇到了某个问题。

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

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

现阶段将采取任何建议。：X

Answer 1

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

Answer 2

没有示例代码，但我想它就像这样

发布后，创建一个回调特别是更新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）

Answer 3

假设您使用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>

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

3 个答案: