jquery select option для построения queryString

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 выхода Results > ?test=f&

Поэтому, если вы заполните input и select, то в качестве опции он должен ответить на запросParam примерно ?test=inputVal&test=selectVal или по отдельности ?test=inputVal или ?test=selectVal

Что я могу сделать, это скопировать всю инструкцию 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

В случае, если Шиби swer прохождение теста в виде массива не в порядке по некоторым причинам,

Следующая упорядочивает значения ваших двух элементов форм в ид = значение & id2 = значение2 использованием jQuery.param():

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>