OnClick 事件在 google chrome 和 safari 中不起作用答案

【问题标题】：OnClick event not working in google chrome and safariOnClick 事件在 google chrome 和 safari 中不起作用
【发布时间】：2012-06-05 13:58:22
【问题描述】：

我在我的蛋糕应用程序中使用了 onclick() javascript 事件。但这在 google chrome 和 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>

【问题讨论】：

你为什么不使用 $.post()

标签： javascript onclick

【解决方案1】：

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

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

【讨论】：

所以我在 froeach 循环中只使用
我明白了。你需要改变你的方法。在 select 上定义 onchange 并传递您所需的值，该值已在循环中设置

【解决方案2】：

我认为您不能在 <option> 上附加 onclick。最好在 <select> 上使用 onchange。

由于您使用的是 jQuery，因此请利用 .on() 来附加处理程序。此外，对标签上的自定义数据使用data-* 属性。更多详情this answer。

【讨论】：

【解决方案3】：

您应该将 onclick 事件放在选择元素上而不是选项上。

【讨论】：

【解决方案4】：

您正在使用 jQuery，因此，您应该使用 jQuery。您应该绑定到 select 元素本身的 change 事件，并将这些相关值存储为数据属性：

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

【讨论】：

感谢您的精彩回复，但这个仅显示 1,1,1,... 在下拉列表中
@user1436533 如果这解决了您的问题，请考虑通过单击答案旁边的复选标记来接受。