Show value dropdown button with JavaScript in Laravel

Question

I want to show my value when I click the button like this:

I want to show that value using JavaScript, but I can't. Because this is make me confused.

This is code in view blade:

<!-- Category Field -->
<div class="form-group col-sm-6">
    {!! Form::label('category_id', 'Category:') !!}
  <div class="dropdown dropdown-full-width dropdown-category">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
            <span class="name">
                <span id="category-select">Choose Category</span>
            </span>
            <span class="caret"></span>
        </button>
    <div class="dropdown-menu row">
      <div class="col-md-4">
        <li><strong>By {{ $category[1] }}</strong></li>
        @foreach($category1 as $occasions)
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['occasions']" class="category-radio"> {{ $occasions }}</label>
          </div>
        </li>
        @endforeach
      </div>
      
      <div class="col-md-4">
        <li><strong>By {{ $category[2] }}</strong></li>
        @foreach($category2 as $types)
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['types']" class="category-radio"> {{ $types }}</label>
          </div>
        </li>
        @endforeach
      </div>

      <div class="col-md-4">
        <li><strong>By {{ $category[3] }}</strong></li>
        @foreach($category3 as $flowers)
        <li>
          <div class="checkbox">
            <label><input type="radio" name="category['flowers']" class="category-radio"> {{ $flowers }}</label>
          </div>
        </li>
        @endforeach
      </div>
    </div>
  </div>
</div>

And this is code in Controller edit function

 public function edit($id)
    {
        $product = $this->productRepository->findWithoutFail($id);
        $store = Store::pluck('name', 'id')->all();
        $photo = json_decode($product->photo_list);
        
        $category = Category::pluck('name','id')->all();
        $category1 = Category::where('parent_id','=',1)->pluck('name','id')->all();
        $category2 = Category::where('parent_id','=',2)->pluck('name','id')->all();
        $category3 = Category::where('parent_id','=',3)->pluck('name','id')->all();
        
        if (empty($product)) {
            Flash::error('Product not found');

            return redirect(route('products.index'));
        }

        return view('products.edit',compact('product','store','category','photo','category1','category2','category3'));
    }

UPDATE CODE

I try this code its work, but when I check 1 button or 2 button only. In other one give me result "undefined".

This is my update code in view blade:

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="dropdown dropdown-full-width dropdown-category">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
          <span class="name">
              <span id="category-select">Choose Category</span>
          </span>
          <span class="caret"></span>
      </button>
  <div class="dropdown-menu row">
    <div class="col-md-4">
      <li><strong>By {{ $category[1] }}</strong></li>
      @foreach($category1 as $occasions)
      <li>
        <div class="checkbox">
          <label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions }}"> {{ $occasions }}</label>
        </div>
      </li>
      @endforeach
    </div>
    
    <div class="col-md-4">
      <li><strong>By {{ $category[2] }}</strong></li>
      @foreach($category2 as $types)
      <li>
        <div class="checkbox">
          <label><input type="radio" name="category['types']" class="category-radio" value="{{ $types }}"> {{ $types }}</label>
        </div>
      </li>
      @endforeach
    </div>

    <div class="col-md-4">
      <li><strong>By {{ $category[3] }}</strong></li>
      @foreach($category3 as $flowers)
      <li>
        <div class="checkbox">
          <label><input type="radio" name="category['flowers']" class="category-radio" value="{{ $flowers }}"> {{ $flowers }}</label>
        </div>
      </li>
      @endforeach
    </div>
  </div>
</div>


<script type="text/javascript">
$('.category-radio').change(function() {
    var category_occasions = $('input[name="category[\'occasions\']"]:checked').val();
    var category_types = $('input[name="category[\'types\']"]:checked').val();
    var category_flowers = $('input[name="category[\'flowers\']"]:checked').val();
    var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
    $('#category-select').text(output);
});
</script>

Look my image for detail

Answer 1

You missed value attributes to your radio button. Checkout the below code and kindly repeat it for other fields also.

    <label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions }}"> {{ $occasions }}</label>

Jquery

$('.category-radio').change(function() {
    var category_occasions = $('input[name="category[\'occasions\']"]:checked').val() || '';
    var category_types = $('input[name="category[\'types\']"]:checked').val() || '';
    var category_flowers =$('input[name="category[\'flowers\']"]:checked').val() || '';
    var output = category_occasions + ((category_occasions && category_types) ? ' - ' : '') + category_types + ((category_types && category_flowers) ? ' - ' : '') + category_flowers;
    $('#category-select').text(output);
});