Question

我有以下内容在浏览器中完美运行，但onchange元素无法在Android和其他设备上触发。我已经找到了解决方案，但我对javascript的理解并不是那么好，你可能会告诉我。

HTML：

 <div class=" col-md-12 col-sm-8 col-xs-8 search-panel search">
   <div class=" col-md-3 col-sm-8 col-xs-8 search-panel"> 

     <form method="POST" action="/">

        <select class="form-control home_cat_id" name="home_cat_id">
            <option value='0'>Select Sales or Rentals</option>
            <option value='12'>Sales</option>
            <option value='1'>Rentals</option>
            <option value='4'>Rentals2</option>
        </select>

    </form>
  </div>
</div>

JAVASCRIPT：

$(document).ready( function(){

     //Reset dropdown on page load  
       $('.home_cat_id').val(0);

    // Check if value has changed //
       $(".home_cat_id").on("change", function(){


    // Pass the form values to the homepage_search.html file    
        $.post('/includes/homepage_search.html', $("select[name='home_cat_id']").serialize(), function(ret){

    // Detect if values have been passed back   
      if(ret!=""){

        $('.search').html(ret);
          } else {
               alert('ERROR');
              }

           });

    // Stop the page refreshing
      return false;

        }); 
     });

提前感谢任何建议

Answer 1

给下拉列表一个id并使用该id来选择jQuery中的元素。此外，如果缓存select元素，则可以获得较小的性能提升。

<强> HTML

<div class=" col-md-12 col-sm-8 col-xs-8 search-panel search"></div>
<div class=" col-md-3 col-sm-8 col-xs-8 search-panel"></div>
<form method="POST" action="/">
  <select id="home_cat_id" class="form-control home_cat_id" name="home_cat_id">
    <option value='0'>Select Sales or Rentals</option>
    <option value='12'>Sales</option>
    <option value='1'>Rentals</option>
    <option value='4'>Rentals2</option>
  </select> 
</form>

<强>的Javascript

$(document).ready( function(){

  // Cache the select element for performance
  $home_cat_id = $('#home_cat_id');    

  //Reset dropdown on page load  
  $home_cat_id.val(0);

  // Check if value has changed //
  $home_cat_id.on("change", function(){

    // Pass the form values to the homepage_search.html file    
    $.post(
      '/includes/homepage_search.html', 
      $home_cat_id.serialize(), 
      function(ret){

        // Detect if values have been passed back   
        if(ret!=""){
          $('.search').html(ret);
        } else {
          alert('ERROR');
        }
      });

    // Stop the page refreshing
    return false;

  }); 
});

更改javascript无法在移动设备/平板电脑上运行

1 个答案: