Question

我尝试在进行搜索时构建query parameter，我设法使用input字段构建它，但是有select下拉菜单可供选择其他价值观。

<input type="text" id="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

Answer 1

如果Shibi的答案通过测试作为数组由于某些原因不合适，

以下使用jQuery.param()将您的两个表单元素的值序列化为id = value＆amp; id2 = value2：

function buildQuery(){
  var $elements = $('#dd, #sel'), //or your selector
      result = {};
  
    $elements.each(function(){
      if(this.value !== '') 
        result[this.id] = this.value; //uses id attribute as variable name
    });
  
    document.getElementById('log').innerHTML = '?' + $.param(result); //see jQuery.param() docs
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<input type="text" id="dd">
<select name="" id="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>

<p id="log">(This element is here just for logging the result)</p>

Answer 2

我会这样做，然后你可以随意添加更多输入..

function buildQuery(){
    var result = '?test=';
    var getVal = $('input#dd').val();
    var getSelectVal = $('select#sel').val();
    var resultArray = [getVal, getSelectVal]; // all values array
    resultArray = resultArray.filter(v=>v!=''); // filter empty results
    if(resultArray.length > 1) {
        result += resultArray.join("&test=");
    } else {
        result += resultArray[0];
    }

    result = encodeURI(result);
    console.log(result);
}

https://jsfiddle.net/3wdecqe9/6/

jquery选择构造queryString的选项

2 个答案: