更新选择框而不刷新页面

Question

是否可以动态地将新选项添加​​到选择框，还可以使用Ajax将其添加到数据库。 我正在寻找一个将新选项附加到选择框以及将该字段添加到数据库的按钮。 谢谢...

编辑2

是否可以在不刷新页面的情况下更新选择框值，这种情况是当我将新数据添加到数据库中而不使用.append时...

Answer 1

尝试这个

这是为了在select添加新option

$('select').append('<option value="0">--Select--</option>');

在添加新选项之后，您可以调用ajax

$.ajax({
    url:'url',
    data:'data',
    type:'post',
    success:function(data){

    }
});

在服务器端放入代码以将数据保存在数据库中。

编辑

$.ajax({
    url:'url',
    data:'data',
    type:'post',
    success:function(data){
    //data will be list of values which you want in options and this sent from server side in json result
    $(data).each(function(index,item){
        $('select').append('<option value="'+item.val+'">'+item.name+'</option>');
    });
    }
});

Answer 2

你的意思是这样吗？

JSFiddle： http : //jsfiddle.net/s4yh3Lor/1/

的HTML

<button id="pop-btn">Populate</button>
<select id="options-box">
    <option value='1'>Option 1</option>
</select>

jQuery的

$(document).ready(function(){
    $("#pop-btn").on("click",function(){
        value = "2";
        name = "Option 2";
        $("#options-box").append("<option value='"+value+"'>"+name+"</option>");
        $.ajax({
            url: "addtodb.php?value="+value+"&name="+name,
            type: "GET",
            success: function(data) {
                alert(data);
            }
        });
    });
});

PHP-尽管这是有效的，但请确保清除查询中的输入，以避免SQL注入。

$value = $_GET["value"];
$name = $_GET["name"];
mysql_query("INSERT INTO tablename (name,value) VALUES ('$name','$value')");