Question

我想放下2个下拉列表，以便用户在给定值上选择一个下拉列表自动更改。我做过类似的事情：

 <div class="input-group">
        <div class="input-group-btn">
          <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle searchcmp1" data-toggle="dropdown"><span id="#search-replace1">Filtrer par</span><span class="caret"></span></button>
            <ul id="bnq1" class="dropdown-menu">
              <?php
                $rows=MainController:: getBanque();
               while ($row =$rows->fetch())
                  echo '<li><a>'.$row['abrvb'].'</a></li>';
              ?>
            </ul>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle searchcmp2" data-toggle="dropdown"><span id="#search-replace2">Filtrer par</span><span class="caret"></span></button>
            <ul id="bnq2" class="dropdown-menu">
              <?php
                $rows=MainController:: getBanque();
               while ($row =$rows->fetch())
                  echo '<li><a>'.$row['abrvb'].'</a></li>';
              ?>
            </ul>
          </div>
        </div>
      <input type="button" id="cmpBtn" class="filter btn btn-info" name="filter" value="Filtrer">
    </div>

这是我的Jquery代码，用最新选择的值修改适当的范围：

 $("ul#bnq1 li a").click(function(){
    alert("ok1")
  var selHtml = $(this).html();
  var selName = $.trim($(this).text());
  $(this).parents('.input-group').find('#search-replace1').html(selHtml);
  //$(this).parents('.btn-group').find('.searchcmp1').val(selName);
});
$("ul#bnq2 li a").click(function(){
  alert("ok2")
var selHtml = $(this).html();
var selName = $.trim($(this).text())
$(this).parents('.btn-group').find('#search-replace2').html(selHtml);
$(this).parents('.btn-group').find('.searchcmp2').val(selName);
});

问题是所选的值即使正确使用也未受到跨度的影响。有什么问题我怎么解决？

Answer 1

在此行id中指定<span id="#search-replace1">Filtrer par</span>时出错。您不应在html元素的#属性中使用id符号。 jquery选择器中使用#符号来标识后面的文本是id。

请参阅下面的更正代码。

$("ul#bnq1 li a").click(function() {
  alert("ok1")
  var selHtml = $(this).html();
  var selName = $.trim($(this).text());
  $(this).parents('.input-group').find('#search-replace1').html(selHtml);
  //$(this).parents('.btn-group').find('.searchcmp1').val(selName);
});
$("ul#bnq2 li a").click(function() {
  alert("ok2")
  var selHtml = $(this).html();
  var selName = $.trim($(this).text())
  $(this).parents('.btn-group').find('#search-replace2').html(selHtml);
  $(this).parents('.btn-group').find('.searchcmp2').val(selName);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group">
  <div class="input-group-btn">
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle searchcmp1" data-toggle="dropdown"><span id="search-replace1">Filtrer par</span><span class="caret"></span></button>
      <ul id="bnq1" class="dropdown-menu">
        <li><a>one</a></li>
        <li><a>two</a></li>
        <li><a>three</a></li>
      </ul>
    </div>
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle searchcmp2" data-toggle="dropdown"><span id="search-replace2">Filtrer par</span><span class="caret"></span></button>
      <ul id="bnq2" class="dropdown-menu">
        <li><a>one</a></li>
        <li><a>two</a></li>
        <li><a>three</a></li>
      </ul>
    </div>
  </div>
  <input type="button" id="cmpBtn" class="filter btn btn-info" name="filter" value="Filtrer">
</div>

Jquery：不会用新选择的值替换Dropdown第一个值

1 个答案: