根据输入选择器制作查询字符串答案

【问题标题】：make query string based on input selector根据输入选择器制作查询字符串
【发布时间】：2014-01-12 06:39:56
【问题描述】：

在用户输入表单上，我有一些输入。其中一些绑定到 datalist 并且 datalist 的 id 和值如下：

<input list="browserList" id="browser" value="opera"/>
<datalist id="browserList">
<option id="1" value="Chrome">
<option id="2" value="Firefox">
<option id="3" value="Opera">
<option id="4" value="Safari">
</datalist>

<input list="colorList" id="color" value="blue"/>
<datalist id="colorList">
<option id="0" value="red"/>
<option id="1" value="blue"/>
<option id="2" value="green"/>
</datalist>

<input type="text" id="name"/>
<input type="text" id="family"/>

现在我尝试在输入文本值和数据列表 ID 上创建一个查询字符串。所以我写了 2 个 jquery 函数：首先从 datalist 中获取 id

function sysGetDLID(dataListID,inputID)
{ return     $('#'+dataListID).find('option[value="'+$('#'+inputID).val()+'"]').attr('id'); }

接下来：

function inputSelector2QueryString(whatSelector)
 { var queryString = '';
   $(whatSelector).each(function() 
    { var elem=$(this); 
      queryString = queryString 
                  + '&' 
                  + elem.id 
                  + '=' 
                  + (elem.attr('list')!=='' 
                    ? sysGetDLID(elem.id+'List',elem.val())
                    : elem.val()); });
 return queryString; }

但是当我调用 inputSelector2QueryString 使查询字符串没有返回时。为什么？

【问题讨论】：

你自己做这个而不是使用 jQuery 的 .serialize() 函数有什么原因吗？
如果您打算在 AJAX 调用中使用它，jQuery 允许您将数据指定为对象，它会为您将其转换为查询字符串。
我不知道 .serialize()，但我根据@Edgar Villegas Alvarado 通知对我的代码进行了一些更改来解决它。 tnx埃德加。这是我的代码，可能对其他人有用：$(whatSelector).each(function() { queryString = queryString + '&' + this.id + '=' + (typeof $(this).attr('list') == 'undefined' ? $(this).val() : sysGetDLID(this.id+'List',this.id)); });

标签： jquery input attributes selector datalist

【解决方案1】：

代替

elem.id

你必须这样做

elem.attr("id")

（也可以是this.id）

因为elem 是一个jQuery 对象。

在您的代码中，elem.id 是 undefined，因此连接到其他字符串也会导致不需要的值

干杯

【讨论】：

你也可以使用this.id，因为elem只是this的一个jQuery包装器。
是的，这是另一种选择
“所以连接到其他字符串也会导致未定义” 实际上不是，在字符串连接中undefined 值变成了字符串undefinedAstring。