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

时间:2017-06-21 09:45:14

标签: php jquery

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

这是我的观看代码。我试过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,而不是3个值

,有超过140个下拉值

这是我的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
                    }
                });

1 个答案:

答案 0 :(得分:1)

根据我的理解,我已根据您的问题制作了示例。 请查看以下示例。

$(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">