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>

构建查询参数的查询的jQuery代码

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输出{{1}}

类似的方式构造它

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

我可以做的是复制整个?test=selectVal语句并将if()替换为getVal，但这似乎效率低下并且重复代码。

实际代码 -

getSelectVal

Sample Fiddle

编辑： - 这就是我想要解决的问题，

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;

Answer 1

如果你不担心IE＆lt; 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＆lt; 9：

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

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

更新

如果你想使这个通用有用，只需将一个选择器字符串传递给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本身不应该定义任何选择变量。那个应该传递给它的配置。

更新

如果你想要对整个事物进行参数化，你可以使用这个小提琴上显示的内容：https://jsfiddle.net/uar5h3xe/4/

动态输入并选择如何构建queryString

1 个答案: