Question

我有一个下拉菜单列表，显示所有当前可用的语言。

问题：如果我单击我的语言foreach循环中的链接，我怎么能这样做呢？它会触发提交下面的表格。

<ul class="dropdown-menu" role="menu">
<?php foreach($languages as $language) {?>
<li><a id="language-form"><?php echo $language['name'];?></a></li>
<form action="<?php echo base_url('admin/common/header/set_lang');?>" id="lang" method="post">
<input type="hidden" name="lang" value="<?php echo $language['code'];?>" />
</form>
<?php }?>
</ul>

Answer 1

试试这个：

$('.dropdown-menu').on('click', 'a', function() {
    $(this).siblings('form').submit();
});

Answer 2

1st ..虽然ID应该是唯一的..尝试使用Classes使用

class="language-form"

而不是

id="language-form"

第二个点击li

提交表单

$('dropdown-menu li').on('click',function(){
    $(this).next('form').submit();
});

第3次提交表格，在更改ID到课程

后点击li中的锚点

$('dropdown-menu li .language-form').on('click',function(e){
        e.preventDefault();
        $(this).closest('li').next('form').submit();
    });

Answer 3

您可以使用AJAX来简化此代码，而不是生成如此多的表单。

请参阅以下代码

<ul class="dropdown-menu" role="menu">
    <?php foreach($languages as $language) {?>
    <li class="lang-item">
        <a value="<?php echo $language['code'];?>">
            <?php echo $language['name'];?>
        </a>
    </li>
    <?php }?>
</ul>
<script>
    $(document).on('click', '.lang-item', function(){
        var value = $(this).find('a').attr('value');
        $.ajax({
            method: 'POST',
            url: "<?php echo base_url('admin/common/header/set_lang');?>",
            contentType: false,
            data: "lang=" + value
        }).then(function(){
            console.log('language successfully update');
        });
    });
</script>

触发提交表单单击“菜单”下拉链接

3 个答案: