提交选择菜单

Question

我使用 jQuery Mobile 中的代码动态生成选择菜单，但在将数据传递到数据库时遇到问题。 菜单是使用每个表单元素的 append 方法生成的。这是一个简短的代码示例：

for (var i = 0; i < arr.length; i++) {
var r = arr[i];
console.log(r);
    name    = r.optionname;
    val     = r.optionvalue;
    nameid  = r.optionnameid;
    valueid = r.optionvalueid;
if ($("#prodAttributes_"+prodID+" select").is("[name*=" + name + "]")) {

var select = $("#prodAttributes_"+prodID).find("select[name*=" + name + "]");
var option = $("<option></option>");
    option.val(val);
    option.text(val);
    option.attr("id", valueid);
    select.append(option);
  } else {

var select = $("<select></select>");
    select.attr("name", name);
    select.attr("id", nameid);
var option = $("<option></option>");
    option.val(val);
    option.text(val);
    option.attr("id", valueid);
    select.append(option);
var label = $("<label></label>");
    label.attr("class", "select");
    label.attr("for", name);


    label.text(name);
    fieldset.append(select);
    myform.append(div);
    $(myform).appendTo("#prodAttributes_"+prodID);

    }

    }

我知道这不是最好的代码。

我遇到的问题是我不知道如何获取提交的数据。 我很困惑是否应该使用表单标签。

真的需要吗？我应该使用 <按钮 > 标签或使用 <输入>标签？

单击提交时应该使用函数，还是应该使用 jQuery 库中的某些内容？

此处生成 HTML：

<div id="prodAttributes_2">
<form id="attributesubmit">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<div role="heading" >Options:</div>

<select name="Memory" id="4">
<option value="16 mb" id="3">16 mb</option>
<option value="32 mb" id="4">32 mb</option>
</select>


<select name="Model" id="3">
<option value="Premium" id="6">Premium</option>
<option value="Deluxe" id="7">Deluxe</option>
</select>

</fieldset>
</div>
<input type="button" id="submitme" value="send" />
</form>
</div>

我还制作了一个 JSFiddle 来向您展示它的实际外观。

我的结论是我应该运行一个函数。但是，我怀疑 serialize() 是否能达到我想要的效果，所以类似于：

$("#submitme").live('click', function(){
$('select').each(function() {
var selectedOption = $(this).find('option:selected');

alert('Value: ' + selectedOption.val() + ' Text: ' + selectedOption.text());
});

var formData = '<p>something generated</p>';
var newPage = $('<div data-role="page" data-url="test"><div data-role="header"><h1>test</h1></div><div data-role="content">'+formData+'</div></div');
    newPage.appendTo( $.mobile.pageContainer );
    //append it to the page container
    $.mobile.changePage(newPage);

        });

但我仍然需要所选元素本身的名称/ID。 当代码准备好插入 SQL 数据库时，它会是什么样子？

Answer 1

这与您想要实现的操作完全相关。如果您在单击时使用按钮 submit，它将查找表单中的所有元素并将其发送到 action 属性的 url >form 采用 get 或 post 格式，这是自动的，因此如果您需要发送大量元素，则需要考虑使用 提交。现在请记住，这不是 ajax，因此您无法知道服务器中发生了什么。如果是几个元素，您可以捕获按钮的单击事件并通过选择器包装元素，然后通过 ajax 发送它。

注意

可以绑定按钮类型submit的submit事件，然后发送一个ajax调用来控制服务器的响应

UPDATE

我不太确定你想要完成什么，但以下是如何获取和处理绑定提交按钮的表单中的所有字段，以避免为表单中的每个 html 元素执行选择器

假设按钮是输入提交

$('form#attributesubmit').live('submit', function (){

     $(this).serialize() -->> this give you all the fields and values of the form
});

Answer 2

无论如何，您需要将数据提交回服务器。您可以使用 AJAX（使用额外的 jQuery 方法）来执行此操作 - 这可以选择允许您在单击“发送”后留在同一页面上，或者您可以将其作为传统的 HTML 表单来执行 - 这将需要 < ;form> 标记，其中 action 设置为您要发送到的 URL。