自定義下拉列表未按預期工作

Question

我為一個電話間隙項目寫了一個自定義下拉列表。 它有3個條目： Enterprices Routing & Switches ， Junos Security和Service Provider Routing and Switching 。 每當我選擇3個條目中的任何一個時，它都會被成功選中，但它會顯示所選的條目兩次。 我希望選擇的條目只顯示一次。 我的JavaScript代碼是：

$(".current_track").click(function() {
  if ($('.track').is(':visible')) {
    $(".track").hide();
    $(".trackIcon").removeClass("trackOpenIcon").addClass("trackCloseIcon");
    if ($('.trackName').text() != "Select Track") {
      $(".category").show();
      $('.lock_hide').show();
      $('#TrackBuy').show();
    }
  } else {
    $(".category").hide();
    $('.lock_hide').show();
    $('#TrackBuy').hide();
    $(".track").show();
    $('.lock_hide').show();
    $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
  }
});
$('.trackDiv').on("click", ".track", function() {
  $('.trackName').text($(this).text());
  $('.trackName').attr("id", $(this).attr("id"));
  $(".track").hide();
  $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon");
  $('.lock_hide').show();
  // saving user selected/clicked trackid and track name to local stroage
  localStorage.setItem("mainTrackid", $(this).attr("id"));
  localStorage.setItem("mainTrackname", $(this).text());
  localStorage.setItem("selectedTrackPayStatus", $(this).attr("payStatus"));
  localStorage.removeItem("selectedTrackPrice");
  // check first paper exist or not if exist means load exams list

  checkTrackpapersExist();

});  

整個代碼示例 。

Answer 1

更新了小提琴 。

你可以使用一個額外的類selected這樣的伎倆。

從所有track刪除selected類並將其添加到單擊的track ：

$('.trackDiv').on("click", ".track", function() {
  $('.track').removeClass('selected');
  $(this).addClass('selected');

  $('.trackName').html($(this).html()); //Use '.html()' to show the icon
  ....
});

從下拉列表中隱藏所選track ：

$(".current_track").click(function() {
  .....

  $('.track.selected').hide();
});

希望這可以幫助。

 $(".current_track").click(function() { if ($('.track').is(':visible')) { $(".track").hide(); $(".trackIcon").removeClass("trackOpenIcon").addClass("trackCloseIcon"); if ($('.trackName').text() != "Select Track") { $(".category").show(); $('.lock_hide').show(); $('#TrackBuy').show(); } } else { $(".category").hide(); $('.lock_hide').show(); $('#TrackBuy').hide(); $(".track").show(); $('.lock_hide').show(); $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon"); } $('.track.selected').hide(); }); $('.trackDiv').on("click", ".track", function() { $('.track').removeClass('selected'); $(this).addClass('selected'); $('.trackName').html($(this).html()); $('.trackName').attr("id", $(this).attr("id")); $(".track").hide(); $(".trackIcon").removeClass("trackCloseIcon").addClass("trackOpenIcon"); $('.lock_hide').show(); }); 

 .trackDiv > .track > .fa-lock { margin-top: 3px; } .fa-lock { color: #fff; font-size: 23px; } .lock_category { padding-right: 0px; padding-top: 3px; } .lock_hide { display: none; } .fa-unlock { color: #fff; font-size: 17px; } .trackDiv { background-color: #374550; border-radius: 4px; height: 40%; margin: 2% 0 0; padding: 3% 2.7% 2.9%; width: 100%; } .trackName { color: #fff; font-family: "robotRegular"; font-size: 16px; font-weight: 500; } .trackOpenIcon { background-image: url("../JunosImages/mob/down-arrow_normal1.png"); background-image: url("../JunosImages/mob/front-arrow_normal_tab.png"); background-repeat: no-repeat; background-size: 100% 100%; display: block; height: 11px; margin-top: 1.5%; width: 19px; } .trackCloseIcon { background-image: url("../JunosImages/mob/front-arrow_normal_tab.png"); background-repeat: no-repeat; background-size: 100% 100%; display: block; height: 18px; margin-top: 0.7%; width: 12px; } .track { color: #fff; display: block; font-family: "robotRegular"; font-size: 16px; font-weight: 500; padding: 5% 0 0; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div id="categorylist"> <div class="trackDiv"> <div class="current_track"> <span class="trackName">Select Track</span> <span class="trackIcon trackOpenIcon pull-right"></span> <div><span class="label label-primary Buy" id="TrackBuy" style="display:none">Buy $24</span></div> </div> <span id="t1" class="track">Enterprices Routing & Switches <span class="fa fa-lock pull-left"></span></span> <span id="t2" class="track">Junos Security</span> <!-- <span id="t3" class="track">Data Center Design</span> --> <span id="t4" class="track"> Service Provider Routing and Switching</span> </div> <div class="category"> <span class="ctgryName">JNCIs - SEC</span> <span class="ctgryIcon pull-right"></span> </div> <div class="category"> <span class="ctgryName">JNCIS - ENT</span> <span class="ctgryIcon pull-right"></span> </div> <div class="category"> <span class="ctgryName">JNCIS - ENT</span> <span class="ctgryIcon pull-right"></span> </div> <div class="category"> <span class="ctgryName" id="ctgryName">JNCIA - Junos</span> <span class="ctgryIcon pull-right"></span> </div> </div>