更新没有页面刷新的选择框

Question

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

编辑2

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

Answer 1

试试这个

这是为了在option

中添加新的select

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