动态更改按钮的值作为下拉列表的选定值

debugcn 发表于 Dev

马哈特什

我有一个自定义下拉菜单。想要将按钮的值更改为下拉列表的选定选项。

这是我的视图代码。我试过 jquery 但没有成功。请有人帮助我使用jquery

            <div class="col-md-5 col-sm-6">
                    <div class="form-group droplist">
                        <label for="project_category">project Categary</label><br/>

                        <input type="button" class="form-control" id="relig" value="<?php   if(isset($projectDetails->project_category) && !empty($projectDetails->project_category)){
                                                                                                echo @$projectDetails->project_category; 
                                                                                            }else{
                                                                                                echo "select Category"; 
                                                                                            }?>">

                        <div id="religions" class="dropdownmenu" style="display:none;padding-left:17px">
                            <?php foreach($categories as $cat){ ?>
                                <div id="<?php echo $cat['code'] ?>" class="maincategory">
                                    <label><input type="radio" class="category" name="project_category" id="category" value="<?php echo $cat['code'] ?>">&nbsp;&nbsp;&nbsp;<?php echo $cat['Project_classification_id']." - ".$cat['Description'] ?></label><br/>
                                </div>  
                            <?php } ?>
                        </div>
                    </div>
                </div>

对于我使用的 foreach，我有超过 140 个下拉值，而不仅仅是 3 个值

这是我的jQuery。我做了所有的事情，但无法将选中的单选值显示为按钮值（标题）

                $('#relig').click(function(){
                    $('#religions').slideToggle("fast");
                });

                traversed_ids = [];
                $(document).on('change','.project_category',function() {
                    maincat = $(".project_category:checked").val();
                    if ($.inArray(maincat, traversed_ids) < 0) { //check element exist in array or not
                        traversed_ids.push(maincat); //add element to array
                        changeCategoryList(maincat); //call ajax

                    }
                });

                function changeCategoryList(maincategory){
                    $.ajax({
                       url: '<?php echo site_url("abcd/xyz"); ?>',
                       type: 'POST',
                       data: { maincategory:maincategory },
                       dataType: 'json',
                       success: function(data) {
                        $.each(data, function(key, value) {
                                var MoreTag='';
                                MoreTag += '<div id="'+value.code+'" Style="padding-left:20px" class="subcategory">';
                                MoreTag += '<label ><input type="radio" class="project_category" name="project_category" id="project_category" value="'+value.code+'">&nbsp;&nbsp;'+value.Project_classification_id+' - '+value.Description+'</label><br/>';
                                MoreTag += '</div>';
                                $("#"+maincategory).append(MoreTag);


                            });
                        }
                    });

                }


                $(".maincategory").click(function (e) {
                    e.stopPropagation(); //to stop event bubbling
                    if ($(this).children('.subcategory').is(':checked')) { //check if hidden or not
                        $(this).children('.subcategory').hide(); //if yes hide
                    } else {
                        $('.maincategory').children('.subcategory').hide();
                        $(this).children('.subcategory').show(); // else show
                    }
                });

帕里克

我根据我对您的问题的理解制作了示例示例。请检查以下示例。

$(document).on('change','input[name="rgroup"]',function() {
    radio = $("input[name='rgroup']:checked").val();
    $("#btn").val(radio);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="rgroup" value="test1">Test1
<input type="radio" name="rgroup" value="test2">Test2
<input type="radio" name="rgroup" value="test3">Test3
<input type="radio" name="rgroup" value="test4">Test4
<br>
<input type="button" id="btn" value="Change">

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。