自定义下拉菜单未按预期工作

3
我为一个phone-gap项目编写了一个自定义下拉框。它有三个选项:企业路由和交换Junos安全服务提供商路由和交换。每当我选择其中任何一个选项时,它都能够被成功选择,但是它会显示已选择的选项两次。我希望已选择的选项只显示一次。我的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();

});  

完整的代码示例


但是它会将所选条目显示两次,您的意思是在选择下拉框中吗? - ScanQR
是的,我的意思是在下拉选择框中。 - Ajay Kulkarni
1个回答

1

更新的fiddle.

您可以使用额外的类selected来完成此操作。

从所有的track中删除selected类,并将其添加到单击的元素中:

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


很酷,它按预期工作了。但是,在“企业路由和交换机”之前有一个锁定符号。当选择“企业路由和交换机”时,我希望它显示出来... - Ajay Kulkarni
欢迎,因此您只需使用 $('.trackName').html($(this).html());,请查看我的更新。 - Zakaria Acharki

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接