オブジェクトを介してURLパラメータを構成する方法

Question

入力要素から選択した値からのurlパラメータを作成しようとしています。

たとえば、1つのテキスト入力フィールドと3つの選択フィールド（名前、部門、ブランド、モデル）があるページがあります。まず、テキストフィールドに名前を入力して値を選択します部門のドロップダウンから、ブランドドロップダウンから何も選択しないで、モデルのドロップダウンから値を選択します。最後にsubmitを押すと、ユーザーが入力した値をそのキーペアでオブジェクトに配置し、 $ params（obj）をurl paramsに追加し、ajax呼び出しに追加します。どうすればいいの？私は私が行ったことの下にコードを持っています。

例：

var obj = {} 
//after click on submit 

obj = { 
    _pick:pick, 
    _dept:dept, 
    _model:model // this obj contains no brand object, because i have not selected anything from the brand dropdown 
} 

HTML：

<form name="populateForm"> 
<div class="dom_element"> 
    <label>Department</label> 
    <input type="text" name="pick" id="pick"> 
</div> 

<div class="dom_element"> 
    <label>Department</label> 
    <select id="departmentSelect"> 
     <option value="0">Select Department</option> 
     <option value="122">Department-1</option> 
     <option value="123">Department-2</option> 
     <option value="124">Department-3</option> 
     <option value="125">Department-4</option> 
     <option value="126">Department-5</option> 
    </select> 
</div> 

<div class="dom_element"> 
    <label>Brands</label> 
    <select id="brandSelect"> 
     <option value="0">Select Brand</option> 
     <option value="212">Brand-1</option> 
     <option value="213">Brand-2</option> 
     <option value="214">Brand-3</option> 
     <option value="215">Brand-4</option> 
     <option value="216">Brand-5</option> 
    </select> 
</div> 

<div class="dom_element"> 
    <label>Model</label> 
    <select id="modelSelect"> 
     <option value="0">Select Model</option> 
     <option value="328">Model-1</option> 
     <option value="324">Model-2</option> 
     <option value="326">Model-3</option> 
     <option value="325">Model-4</option> 
     <option value="322">Model-5</option> 
    </select> 
</div> 

</form> 
<button class="ApplyFilter">Apply</button> 

JS：

$(document).ready(function(){ 
    $('.ApplyFilter').on('click',function(){ 
     var paramObj = {}; 
     var pick = $('#pick').val(); 
     var dept = $('#departmentSelect').val(); 
     var brand = $('#brandSelect').val(); 
     var model = $('#modelSelect').val(); 

    if(pick != ''){ 
     paramObj = { 
      _pick:pick 
     } 
    } 

    if(dept > 0){ 
     paramObj = { 
      _dept:dept 
     } 
    } 

    if(brand > 0){ 
     paramObj = { 
      _brand:brand 
     } 
    } 

    if(model > 0){ 
     paramObj = { 
      _model:model 
     } 
    } 

    /* 
     this is the object i am expecting at the end, if any input does not have any value then that should not be in this object 
     paramObj = { 
      _pick:pick, 
      _dept:dept, 
      _brand:brand, 
      _model:model 
     } 
    */ 

    var urlParams = $.params(paramObj); 

    if(urlParams.length > 0){ 
     $.ajax({ 
      type: "POST", 
      url: "/api/getMydata/?"+urlParams, 
      success:function(response){ 
       console.log(response.responseData); 
      } 
     }) 
    } 

    }); 
}); 

Answer 1

代わりの

paramObj = { 
    _pick:pick 
} 

はちょうどparamObjオブジェクトは、ちょうど各if文にリセットされ、

paramObj._pick = pick; 

あなたがそれをやっている現在の方法

を行います。