在 Laravel 中使用 JavaScript 显示值下拉按钮

Question

当我点击这样的按钮时，我想显示我的价值：

我想使用 JavaScript 显示该值，但我不能。因为这让我很困惑。

这是视图刀片中的代码：

<!-- 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>

这是控制器编辑功能中的代码

 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'));
    }

更新代码

我尝试这段代码的工作，但是当我只检查 1 个按钮或 2 个按钮时。在另一个给我结果“未定义”。

这是我在视图刀片中的更新代码：

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

查看我的图片了解详情

Answer 1

您错过了单选按钮的值属性。检查下面的代码，并在其他领域也重复一遍。

    <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);
});