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

Question

我想在下拉单选按钮中显示我的文本，如下所示：

但是，我的单选按钮错误，我的下拉单选按钮没有任何反应：

如何实现这个下拉单选按钮？这是我正在查看的代码

<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->id }}"> {{ $occasions->name }}</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->id }}"> {{ $types->name }}</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->id }}"> {{ $flowers->name }}</label>
        </div>
      </li>
      @endforeach
    </div>
  </div>
</div>


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

Answer 1

您的问题实际上与 Javascript/JQuery 有关，您可以将问题简化为。

在这种情况下，您请求的是复选框的text()，但实际上，它是保存您所追求的值的标签：

var category_occasions = $('input[name="category[\'occasions\']"]:checked').parent().text() || '';

还有一个例子：

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

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

<ul>
  <li>
    <label>
          <input type="radio" name="category['occasions']" class="category-radio" value="birthday" />
 Birthday</label>
    <label>
          <input type="radio" name="category['types']" class="category-radio" value="birthday" />
Bouqet</label>
    <label>
          <input type="radio" name="category['flowers']" class="category-radio" value="birthday" />
Daisies</label>
  </li>
</ul>

Answer 2

你必须使用 Jquery parent() 或 closest('label') 来选择你的元素，你可以很容易地用 text()。

看下sn-p。

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

<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 Occasions</strong></li>
      
      <li>
        <div class="checkbox">
          <label><input type="radio" name="category['occasions']" class="category-radio" value="0">Anniversaries</label>
          <label><input type="radio" name="category['occasions']" class="category-radio" value="1">Birthdays</label>
        </div>
      </li>
    </div>
    
    <div class="col-md-4">
      <li><strong>By Types</strong></li>
      
      <li>
        <div class="checkbox">
          <label><input type="radio" name="category['types']" class="category-radio" value="0">Baskets</label>
          <label><input type="radio" name="category['types']" class="category-radio" value="0">Hampers</label>
        </div>
      </li>
    </div>

    <div class="col-md-4">
      <li><strong>By Flowers</strong></li>
      <li>
        <div class="checkbox">
          <label><input type="radio" name="category['flowers']" class="category-radio" value="0">Roses</label>
          <label><input type="radio" name="category['flowers']" class="category-radio" value="0">Tulips</label>
        </div>
      </li>
    </div>
  </div>
</div>