queryStringを作成するjquery selectオプション

Question

私はquery parameterを検索しようとしていますが、inputフィールドでビルドできましたが、他の値を選択するにはselectドロップダウンメニューがあります。私はselectから値を取得し、私の入力にconsole.log出力にそれを同様の方法を構築することができますどのように

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); 
    } 

わからないクエリのparamを構築するクエリの

<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のコードResults > ?test=f&

したがって、inputとselectのオプションを入力すると、queryParamは?test=inputVal&test=selectVal、または?test=inputValまたはのようになります。 0

if()文全体をコピーし、getValをgetSelectValに置き換えてください。ただし、効率が悪く、コードが重複しているようです。

実際のコード -

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 = $('textarea.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

Answer 1

私はこのようにそれを行うだろうし、あなたが望むように、あなたはより多くの入力を追加することができます。..

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/

Answer 2

Shibiさんがswer通過試験アレイは、いくつかの理由で

微細ないように、次は、ID =値& ID2 = jQuery.param()を使用して値2にあなたの2つのフォーム要素の値をシリアル化：=

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>