替换 bootstrap select 标签

Question

我正在尝试切换 select 标签，但通过 ajax 发送时值不一致。谁能告诉我哪里出了问题

<select id="reacTags" class="selectpicker reacTags" data-live-search="true">
  <option value="pdt">most recent posts</option>
  <option value="mlp">most liked posts</option>
  <option value="mdp">most disliked posts</option>
</select>

<select id="reacTags" class="selectpicker reacTags" data-live-search="true">
  <option value="pil">posts i like</option>
  <option value="pid">posts i dislike</option>
  <option value="cim">comments i made</option>
</select>

var reacTags = "";

$('.reacTags').on('changed.bs.select', function(e) {
  reacTags = e.target.value;
});


// set go to user activity
$('.my-act').on('click', '.my-act-lnk', function() {
  // replace tags
  $('.reacTags').html('<select id="reacTags" class="selectpicker reacTags" data-live-search="true"><option value="pil">posts i liked</option><option value="pid">posts i disliked</option><option value="pic">posts i commented</option><option value="pis">posts i saved</option><option value="cil">comments i liked</option><option value="cid">comments i disliked</option></select>');
  // initialize selectpicker
  $('.reacTags').selectpicker();
  // replace link
  $('.my-act').html('<a href="javascript:void(0)" class="my-srt-lnk link-black"><i class="fa fa-arrow-circle-right"></i> Regular Sort</a>');
});
// back to regular sort
$('.my-act').on('click', '.my-srt-lnk', function() {
  // replace tags
  $('.reacTags').html('<select id="reacTags" class="selectpicker reacTags" data-live-search="true"><option value="pdt">most recent posts</option><option value="mlp">most liked posts</option><option value="mdp">most disliked posts</option><option value="mcp">most commented posts</option><option value="msp">most saved posts</option><option value="mlc">most liked comments</option><option value="mdc">most disliked comments</option></select>');
  // initialize selectpicker
  $('.reacTags').selectpicker();
  // replace link
  $('.my-act').html('<a href="javascript:void(0)" class="my-act-lnk link-black"><i class="fa fa-arrow-circle-left"></i> My Activity</a>');
});

这有效，但切换几次后，该值默认为 value=pdt 并根据任何其他 selected 标签停止工作

Answer 1

我的坏人有两个语义不佳的 id

<div class="o-reac">
 <select id="reacTags1" class="selectpicker reacTags1" data-live-search="true">
   <option value="pdt">most recent posts</option>
   <option value="mlp">most liked posts</option>
   <option value="mdp">most disliked posts</option>
   <option value="mcp">most commented posts</option>
   <option value="msp">most saved posts</option>
   <option value="mlc">most liked comments</option>
   <option value="mdc">most disliked comments</option>
 </select>
</div>

<div class="i-reac">
 <select id="reacTags2" class="selectpicker reacTags2" data-live-search="true">
   <option value="pil">posts i liked</option>
   <option value="pid"> posts i disliked</option>
   <option value="pis"> posts i saved</option>
   <option value="cim"> comments i made</option>
   <option value="cil">comments i liked</option>
   <option value="cid">comments i disliked</option>
 </select>
</div>

$('.reacTags1').on('changed.bs.select', function (e) {
        reacTags = e.target.value;
    });
    $('.reacTags2').on('changed.bs.select', function (e) {
        reacTags = e.target.value;
    });
    
    
    // set go to user activity
    $('.my-act').on('click', '.my-act-lnk', function() {
      // toggle visibility
      $('.o-reac').hide();
      $('.i-reac').show();
      // set new val
      reacTags = $('#reacTags2').val();
      // replace link
      $('.my-act').html('<a href="javascript:void(0)" class="my-srt-lnk link-black"><i class="fa fa-arrow-circle-right"></i> Regular Sort</a>');
    });
    // back to regular sort
    $('.my-act').on('click', '.my-srt-lnk', function() {
      // toggle visibility
      $('.i-reac').hide();
      $('.o-reac').show();
      // set new val
      reacTags = $('#reacTags1').val();
      // replace link
      $('.my-act').html('<a href="javascript:void(0)" class="my-act-lnk link-black"><i class="fa fa-arrow-circle-left"></i> My Activity</a>');
    });

`

替换 bootstrap select 标签

replace bootstrap select tags

javascript

jquery

twitter-bootstrap-3

bootstrap-select