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/?seller=test1

If any one select seller and city than url redirect to

www.test/?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 !!

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./?seller=test1

If any one select seller and city than url redirect to

www.test./?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 !!

• javascript
• php
• jquery
• html

• Do you want this to happen once the form is submitted or do you want it to happen instantly? – Epodax Commented Sep 29, 2015 at 9:26
• 1 Give name to the form elements and submit form using GET method. Validate form fields at server end. – Rayon Commented Sep 29, 2015 at 9:27
• @Epodax i want onchange of selectbox ! – dp4solve Commented Sep 29, 2015 at 9:30
• Then why tag it with php? – Epodax Commented Sep 29, 2015 at 9:37

3 Answers 3

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./?'+params.join('&')); // for display
    // windox.location = 'www.test./?'+params.join('&'); // for you actual use
});

<script src="https://ajax.googleapis./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./?</div>

check this

$('.sellereselect').change(function(){
      
      var url = "http://www.test./?";
      
      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./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>

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./?'+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>