Question

我有一个巨大的自动填充字段，其中包含一系列考试此字段会将值添加到其下方的div。

我需要能够在表格提交上提交此div的所有值我需要一种方法来在输入之后（提交之前）操纵div的值类似于每行上的小x将删除条目

到目前为止，这是我的代码：

$(function() {
            function log( message ) {
        $( "<p/>" ).text( message ).prependTo( "#exams" );
        $( "#exams" ).scrollTop( 0 );
    }  

    $("#clearexamcell").click(function(){$("#examlist").val("");}); // clears the field, ignore 

    $("#examlist").focus(function(){$(this).val("");}); // clears the field, ignore 

    $("#enterdrug").click(function(){
        log ( $("#examlist").val() );
        });     

    var fullTags = ["...."];

    $( "#examlist" ).autocomplete({
        source: fullTags,
        select: function( event, ui ) {
            log( ui.item ?
                "exam: " + ui.item.label :
                "exam: " + this.value);
        }
    });
});

这是HTML：

<form>
<div class="ui-widget" ><label for="full0">Search Exam: </label>
<br/><br/>
<input style="width:600px;height:40px;" id="examlist" name="full0">

几个按钮：

<input type="button" id="enterdrug" value="enter" > 
<input type="button" id="clearexamcell"  value="clear"></div>

和获得结果的div：

<div id="exams" style="width:100%;height:auto;padding-top:30px;border-bottom-style: solid;">
</div>  
...</form>

到目前为止它按预期工作并生成一个div：

<div id="exams" style="width:100%;height:auto;padding-top:30px;border-bottom-style: solid;">
<p>selection1</p>
<p>selection2</p>
<p>selection3</p>
<p>selection4</p>
</div>

关于我如何操作这个然后在表单的其余部分完成时提交div的内容的任何想法？谢谢。

Answer 1

我最终使用了这个：

        log( ui.item ?
            "exam: " + ui.item.label :
            "exam: " + this.value);

向用户显示他正在输入的内容而这：

var updatedlist = $('div.exam').text();
        $("#submitexams").val(updatedlist);

使用整个显示的div

的值更新标识为#submitexams的隐藏文本区域

他们都可以点击按钮

对于数据的操纵，如果用户想要编辑列表，则我补充说：

$(document).ready(function(){   
 $(function() {
 $("#clearlastexamentry").click(function(){
 $("div.exam li:first").remove();
 var updatedlist = $('div.examlist').text();
 $("#submitexams").val(updatedlist);
 }); }); });

单击另一个按钮会从提交和显示的列表中删除第一行（上次提交的考试）不完全是我想要的，但它现在符合我的目的。
希望它可以帮助某人，如果你需要一个演示发表评论并在jsfiddle发布类似的东西

使用来自多个JQ UI自动完成条目的值提交自定义div

1 个答案: