2017-08-31 12 views
0

私は質問したい....なぜ私のドロップダウンはテキストを表示できないのですか?私は私のコードが正しいことを確認して....しかし、私は、私は本当にこのことについて混乱テキストは何も.....示しカント... ここでは私のラジオボタン画像:ラジオボタンの表示テキスト

enter image description here

とここに私の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について私を助けてください.. .becaus私はJavaScriptで新しいです電子.....私は答えを得る

+0

はあなたがレンダリングされたHTMLを投稿できますか?ブラウザからHTMLコードは何ですか? –

+1

@ FaizFurios52あなたの 'ul'はどこですか?クラス名が 'dropdown'と' li'の 'div'で始まったばかりですが、' ul'がありません。 – Shiladitya

+0

選択したラジオボタンのブラウザコンソールで、 '$(this).parent()。text()。trim();'の値を調べてみます。 –

答えて

0

....

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

関連する問題