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

Question

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

这是我的视图代码。我尝试了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> 

我以上对140个下拉值，我用的foreach，notonly 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 
        } 
       }); 

Answer 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">