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>

我想如果任何一个选择卖家而不是网址重定向到

www.test.com/?seller=test1

如果任何人选择卖家和城市而不是网址重定向到

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

如果已经在url中的参数将更新参数中的值。

我已尝试过大多数事情，例如更换窗口，更改选择框的事件，但没有任何帮助我！请任何人帮助我!!

Answer 1

我会在每个选择上设置一个数据属性，如data-param="city"，然后像下面一样循环遍历它们。

请注意js 中的encodeURIComponent（），如果没有它，其值包含“＆amp;”，“？”，“/”，“=”等字符的选项会破坏代码，就像第二个选择框中的选项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

检查这个

＆＃13;

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

＆＃13;

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

＆＃13;

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>

使用基于select选项的jquery更新或替换URL参数

3 个答案: