动态输入并选择如何构建查询字符串

Question

我试图建立一个query parameter进行搜索时，我设法建立它与input字段但是有select下拉菜单来选择其他值。

<input type="text" class="dd"> 
<select name="" class="sel"> 
    <option value=""></option> 
    <option value="Prepare">Prepare</option> 
    <option value="Ready">Ready</option> 
    <option value="Cancel">Cancel</option> 
</select> 

<button onclick="buildQuery()">Build query</button> 

查询构建查询参数

function buildQuery(){ 
    var result = "?"; 
    var getVal = $('input.dd').val(); 
    console.log('Input > ', getVal); 
    var getSelectVal = $('select.sel').val(); 
    if (getVal != null && (getVal != "")) { 
    let inputValues = getVal 
    .split("\n") 
    .filter(function (str) { return str !== "" }) 
    .join("&test="); 
    // then add it to the overall query string for all searches 
    result = result + 'test' + "=" + inputValues + "&"; 

    console.log('Results > ', result); 
    } 

不知道我怎样才能从select获得的价值，构建其方式类似于我的输入输出CONSOLE.LOG jQuery代码Results > ?test=f&

因此，如果您填写input和select一个选项，则queryParam应该说类似?test=inputVal&test=selectVal或个人?test=inputVal或?test=selectVal

我可以做的是复制整个if()声明并用getSelectVal代替getVal，但它似乎效率低下并且复制代码。

实际代码 -

newSearchParams.properties.forEach(function (inputSearch) { 
     // first reparse the input values to individual key value pairs 
     // Checks which field is not null and with empty string (space) 
     var getVal = $('input.input_' + inputSearch.name).val(); 
     var getSelectVal = $('select.select_' + inputSearch.name).val(); 
     if (getVal != null && (getVal != "")) { 
      let inputValues = getVal 
       .split("\n") 
       .filter(function (str) { return str !== "" }) 
       .join("&" + inputSearch.name + "="); 
      // then add it to the overall query string for all searches 
      result = result + inputSearch.name + "=" + inputValues + "&"; 
     } 
    }, this); 
    // remove trailing '&' 
    result = result.slice(0, result.length - 1); 
    return result; 

Sample Fiddle

编辑： - 这就是我试图摆脱这个问题，

if(paramMethod == 'path'){ 
// build parameter api/id/1 
} else if(paramMethod =='query'{ 
// build queryString api/apiPoint?id=1 
} else if(paramMethod == 'none') { 
// var result = ""; 
// return result; 
} 

Answer 1

如果”无需担心IE < 9：

function buildQuery() { 
    return $('.dd, .sel') 
    .toArray() 
    .reduce(function(str, el) { 
     return str + (el.value ? el.name + '=' + el.value + '&' : '') 
    }, '?') 
} 

工作小提琴：https://jsfiddle.net/qk3d7bq1/2/

如果你关心IE < 9：

function buildQuery() { 
    var query = '?' 
    $('.dd, .sel').each(function() { 
    if (this.value) { 
     query += this.name + '=' + this.value + '&' 
    } 
    }) 
    return query 
} 

工作小提琴：https://jsfiddle.net/d51f5uyw/2/

---

更新

如果你想使这个一般有用的，只需通过选择器条NG到BuildQuery对于选择您想要的确切的东西：

function buildQuery(selector) { 
    return $(selector) 
    .toArray() 
    .reduce(function(str, el) { 
     return str + (el.value ? el.name + '=' + el.value + '&' : '') 
    }, '?') 
} 

小提琴：https://jsfiddle.net/qsxkz4qu/1/

或者你可以指定一个容器，并BuildQuery对于找到所有容器内的表单字段：

小提琴： https://jsfiddle.net/uar5h3xe/1/

但buildQuery本身不应该定义任何选择变量。这是应该传递给它的配置。

---

更新

如果你想参数整个事情，你可以使用类似这个捣鼓什么显示'S：https://jsfiddle.net/uar5h3xe/4/