根據選擇選項使用jQuery更新或替換URL參數

Question

我有3個選擇框，用於賣家，技能和城市

對於賣方

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

為了技能

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

對於城市

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

我想選擇除URL以外的任何賣方

www.test.com/?seller=test1

如果有人選擇賣方和城市而不是網址，請重定向至

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

如果參數已經在url中，則它將更新參數中的值。

我已經嘗試了大多數事情，例如窗口替換，更改選擇框的事件，但是沒有任何幫助！ 請任何人幫助我！

Answer 1

我會在每個選擇上設置一個data屬性，例如data-param="city"然后像下面那樣遍歷它們。

注意js中的encodeURIComponent（） ，如果沒有它，則選項的值包含字符“＆”，“？”，“ /”，“ =“等）將破壞代碼，例如第二個選擇框中的選項4。

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

Answer 2

檢查這個

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

Answer 3

下面是onchange事件的js

$('.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;
});

和更新的HTML是

<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>