OnClick事件不適用於谷歌瀏覽器和Safari瀏覽器

Question

我在我的蛋糕應用程序中使用了onclick（）javascript事件。但這不適用於谷歌瀏覽器和Safari瀏覽器。 這裏是我的代碼

<select name="ovwear" > 
      <option>--Select Category--</option> 
      <?php 
      $i = 1; 

      foreach($styleDetail as $key=>$val) { ?> 


      <option onClick="catDetail(<?php echo $val['shop_style_categories']['cat_id'].",".$val['shop_style_categories']['parent_id'] ?>);" value="<?php echo $i;?>">Category <?php echo $i;?></option> 

      <?php $i++; } ?> 

      </select> 

這裏是功能：

<script type="text/javascript"> 
    function catDetail(cat_id,parent_id){ 
     //alert("called here"); 
     var cat_id = cat_id; 
     var parent_id = parent_id; 
      jQuery.ajax({ 
          type: "POST", 
          url: "/admin/shop/styledata", 
          data:"cat_id=" + cat_id, 
          dataType: "html", 
          success: function(data) { 
          $("#alertt").html(data); 
         } 
      }); 
    } 
</script> 

Answer 1

我認爲你不能在<option>附加一個onclick。改爲使用onchange代替<select>。

而且由於您使用的是jQuery，請利用使用.on()來附加處理程序。此外，還可以使用data-*屬性爲標籤上的自定義數據。更多詳細信息在this answer。

Answer 2

您應該在select元素上放置onclick事件，而不是在選項上。

Answer 3

onclick has to be on `<select` instead of `<option` 

<select name="ovwear" onClick=..... 

Answer 4

你使用jQuery，因此，你應該使用jQuery的。你應該結合選擇元素本身的變化情況，並作爲數據屬性存儲這些相關的值：

<?php 
    $o = ""; 
    for ($i = 0; $i < count($styleDetail); $i++) { 
     $o .= sprintf("<option data-cat-id='%s' data-parent-id='%s'>%s</option>", 
         $styleDetail[$i]['shop_style_categories']['cat_id'], 
         $styleDetail[$i]['shop_style_categories']['parent_id'], 
         "Category " . $i+1); 
    } 
?> 
<select name="ovwear"><?php echo $o; ?></select> 

接下來，我們需要綁定了數據：

<script> 
    $(function(){ 
     $("select[name='ovwear']").on("change", function(){ 
      var selected = $("option:selected", this); 
      $.ajax({ 
       type: "POST", 
       url: "/admin/shop/styledata", 
       data: { 'cat_id':$(selected).data("cat-id") }, 
       dataType: "html", 
       success: function(data) { 
        $("#alert").html(data); 
       } 
      }); 
     }); 
    }); 
</script>