单选按钮显示文本

Question

我想问......为什么我的下拉菜单无法显示文字？我确保我的代码是正确的....但我不能显示任何文字.....我真的很困惑这个...... 这是我的单选按钮图像：

这里我的html代码在view.php .........

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/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">- -
              @foreach($categoriesid as $kategori)
                {{ $kategori->name}} -
              @endforeach

          -</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)
      @php
        $checked = false;

        foreach ($categoriesid as $d) {

          if($d->id ==  $occasions->id) $checked=true;

        }
      @endphp
      <li>
        <div class="checkbox">
          @if($checked)
          <label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions->id }}" checked="checked"> {{ $occasions->name }}</label>
          @else
            <label><input type="radio" name="category['occasions']" class="category-radio" value="{{ $occasions->id }}"> {{ $occasions->name }}</label>
          @endif
        </div>
      </li>
      @endforeach
    </div>

    <div class="col-md-4">
      <li><strong>By {{ $category[2] }}</strong></li>
      @foreach($category2 as $types)
      @php
        $checked = false;

        foreach ($categoriesid as $d) {

          if($d->id ==  $types->id) $checked=true;

        }
      @endphp
      <li>
        <div class="checkbox">
          @if($checked)
          <label><input type="radio" name="category['types']" class="category-radio" value="{{ $types->id }}" checked="checked"> {{ $types->name }}</label>
          @else
            <label><input type="radio" name="category['types']" class="category-radio" value="{{ $types->id }}"> {{ $types->name }}</label>
          @endif
        </div>
      </li>
      @endforeach
    </div>

    <div class="col-md-4">
      <li><strong>By {{ $category[3] }}</strong></li>
      @foreach($category3 as $flowers)
      @php
        $checked = false;

        foreach ($categoriesid as $d) {

          if($d->id ==  $flowers->id) $checked=true;

        }
      @endphp
      <li>
        <div class="checkbox">
          @if($checked)
          <label><input type="radio" name="category['flowers']" class="category-radio" value="{{ $flowers->id }}" checked="checked"> {{ $flowers->name }}</label>
          @else
            <label><input type="radio" name="category['flowers']" class="category-radio" value="{{ $flowers->id }}"> {{ $flowers->name }}</label>
          @endif
        </div>
      </li>
      @endforeach
    </div>
</div>
</div>

这里我的javascript代码在视图中.......

 $(function(){
    $('input[type="radio"]').click(function(){
        var $radio = $(this);
        var name = $(this).prop("name");

        // if else for checked true and false
        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
            $('#category-select').text('');
        }
        else{
            $radio.data('waschecked', true);
            $(`input[name=${name}]:not(:checked)`).data('waschecked', false);
            $('#category-select').text(txt).trim();
        }

        let output = [];
        var txt;
        $('input[type="radio"]:checked').each( function() {
            txt = $(this).parent().text().trim();
            output.push(txt);
        });
        $('#category-select').text(output.join(' - '));
    });
});

请帮我解决这个javascript ...因为我是javascript的新手.....

Answer 1

我得到答案....

$('.dropdown-menu').on('click', function(e) {
    e.stopPropagation();
  });

  $(function(){
    var $radio = $(this);
    if($('input[type="radio"]:checked').data('waschecked', true))
      {
        $radio.data('waschecked', true);
      }
    $('input[type="radio"]').click(function(){
        var $radio = $(this);
        var name = $(this).prop("name");

        // if else for checked true and false
        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
            $('#category-select').text('');
        }
        else{ 
            $radio.data('waschecked', true);
            $('input[type="radio"]:not(:checked)').data('waschecked', false);
            $('#category-select').text(txt);
        }
        
        let output = [];
        var txt;
        $('input[type="radio"]:checked').each( function() {
            txt = $(this).parent().text();
            output.push(txt);
        });
        $('#category-select').text(output.join(' - '));
    });
});