Question

我制作了一个可编辑的下拉菜单：

<html>
<body>
<div style="position:relative;width:200px;height:25px;border:0;padding:0;margin:0;">
    <select style="position:absolute;top:0px;left:0px;width:200px; height:25px;line-height:20px;margin:0;padding:0;" onchange="document.getElementById('displayValue').value=this.options[this.selectedIndex].text; document.getElementById('idValue').value=this.options[this.selectedIndex].value;">

        <option></option>
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">three</option>

    </select>
    <input type="text" name="displayValue" placeholder="add/select a value" id="displayValue" style="position:absolute;top:0px;left:0px;width:183px;width:180px\9;#width:180px;height:23px; height:21px\9;#height:18px;border:1px solid #556;" onfocus="this.select()">
    <input type="hidden" name="idValue" id="idValue">
</div>
</body>
</html>

我想发布已添加的值，以便将其包含在下一轮的下拉列表中。

Answer 1

我建议你使用jQuery来轻松实现。您可以将它们包装在form中并通过POST执行jQuery Ajax然后将该值存储在某处以备将来使用，然后将其作为新的option项附加到下一个。

通过aJax进行POST

$(function() {
    $('#form').on('submit', function(e) {
        // do not reload the page
        e.preventDefault();

        // do the posting
        var newValue = $('#displayValue').val();

        $.post('http://MYURL.com/post.php', {
            new_field: newValue
        }, function(data) {
            // success callback
            $('#form > select').append('<option value="'+newValue+'">'+newValue+'</option>');
        })
    });
})

基本上，您将newValue发布到http://MYURL.com/post.php并处理新数据，然后success回调将处理将新值插入select。

代码未经过测试，请告知我是否无效

详细了解jquery.post() here以及有关jquery here

的更多信息

使用可编辑的下拉列表发布内容

1 个答案: