Update or replace URL parameters using jquery based on select option

问题

I have 3 select box for seller,skills and city

For seller

<select data-placeholder="Select Seller..." class="sellereselect"> 
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>

For skills

<select data-placeholder="Select skills..." class="sellereselect"> 
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>

For city

<select data-placeholder="Select city..." class="sellereselect"> 
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>

I want if any one select seller than url redirect to

www.test.com/?seller=test1

If any one select seller and city than url redirect to

www.test.com/?seller=test1&skills=test1

if parameters already in url than it will update value in parameters.

I have tried most things like window replace, changes event for select box but nothing help me!! please any one help me !!

回答1:

check this

$('.sellereselect').change(function(){
      
      var url = "http://www.test.com/?";
      
      if($("#seller").val()!='Select')
        url+='seller='+encodeURIComponent($("#seller").val())+'&';
      
      if($("#skill").val()!='Select')
        url+='skill='+encodeURIComponent($("#skill").val())+'&';
      
      if($("#city").val()!='Select')
        url+='city='+encodeURIComponent($("#city").val());
      
      url = url.replace(/\&$/,'');
      alert(url);
      window.location.href=url;
      
      });



   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id="seller" data-placeholder="Select Seller..." class="sellereselect"> 
      <option>Select</option>
       <option value="test1&1">test1&1</option>
       <option value="test2">test2</option>
       <option value="test3">test3</option>
       <option value="test4">test4</option>
    </select>

    <select id="skill" data-placeholder="Select Seller..." class="sellereselect"> 
       <option>Select</option>
       <option value="test1">test1</option>
       <option value="test2">test2</option>
       <option value="test3">test3</option>
       <option value="test4">test4</option>
    </select>

    <select id="city" data-placeholder="Select Seller..." class="sellereselect"> 
       <option>Select</option>
       <option value="test1">test1</option>
       <option value="test2">test2</option>
       <option value="test3">test3</option>
       <option value="test4">test4</option>
    </select>

回答2:

I would set a data attribute on each select like data-param="city" then loop through them like the below.

Note the encodeURIComponent() in the js, without it, options whose values contain characters like "&", "?", "/", "=", etc would break the code, like option 4 in the 2nd select box.

$('.sellereselect').change(function(){
    var params =[];
    $('.sellereselect').each(function(){
        $this=$(this);
        if(!$this.val()=='') params.push($this.data('param')+'='+encodeURIComponent( $this.val() ));
    });
    $('#urlDislay').text('www.test.com/?'+params.join('&')); // for display
    // windox.location = 'www.test.com/?'+params.join('&'); // for you actual use
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
For seller
<select data-placeholder="Select Seller..." class="sellereselect" data-param="seller"> 
   <option></option>
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>

<br>
For skills
<select data-placeholder="Select skills..." class="sellereselect" data-param="skills"> 
   <option></option>
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test&4</option> <!-- note the encodeURIComponent() in the js, without it this option would break the code -->
</select>
<br>
For city
<select data-placeholder="Select city..." class="sellereselect" data-param="city"> 
   <option></option>
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>
<br>
<br>
<div id="urlDislay">www.test.com/?</div>

回答3:

The js for onchange event is below

$('.sellereselect').change(function(){
    var type=$(this).attr('data-type');
    var data="";
    if(type="seller" && $('#sellerselect option:selected').val()!="")
        data='seller='+$('#sellerselect option:selected').val()+'&';
    if(type="skills" && $('#skillsselect option:selected').val()!="")
        data=data+'skills='+$('#skillsselect option:selected').val()+'&';
    if(type="city" && $('#cityselect option:selected').val()!="")
        data=data+'city='+$('#cityselect option:selected').val();
    window.location='www.test.com/?'+data;
});

And the updated html is

<select data-placeholder="Select Seller..." class="sellereselect" data-type="seller" id="sellerselect"> 
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>

<select data-placeholder="Select skills..." class="sellereselect" data-type="skills"  id="skillsselect"> 
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>

<select data-placeholder="Select city..." class="sellereselect" data-type="city"  id="cityselect"> 
   <option>test1</option>
   <option>test2</option>
   <option>test3</option>
   <option>test4</option>
</select>

来源：https://stackoverflow.com/questions/32840406/update-or-replace-url-parameters-using-jquery-based-on-select-option