单击下拉列表后，选项消失并显示结果

Question

我正在尝试创建一个包含多个选项的选择下拉列表，单击该选项后，所选值应以预期的样式显示，然后下拉列表将消失。如果单击结果框的“X”按钮，结果框应消失，下拉列表应再次显示。

我尝试编写如下脚本：

JSFiddle

当我尝试使用时

if ($(promo).length > 0)

为了证明所选选项的存在，我仍然从控制台获得了 O 并且我现在卡在了这一点上，我无法获得所需的结果。

有人可以分享一些意见并告诉我该怎么做吗？非常感谢您花时间阅读这个问题。问候。

Answer 1

Here 是一个工作小提琴。有几点需要注意：

• 您应该使用change 事件而不是click，这样键盘导航也会适当地触发这些事件。
• 有几个参考错误
• 您的小提琴中有几个拼写错误和错误的选择器。例如，您编写的 $("selected-promo") 没有句点 (.)，导致按元素类型选择。 $(".selectPromo").css({"display":"none"}); 指的是select 元素，其类实际上是select-promo 等。注意你如何命名事物，并与名称保持一致，因为这是解决这些难以找到但微不足道的错误的完美秘诀.例如，您正在混合camelCase 和kebab-case。选择一个并坚持下去，并注意选择器运算符，例如 . 和 #。
• 您的小提琴不包含 jQuery 引用，需要将其脚本执行设置为 onDomReady。

Answer 2

在更改下拉列表中的选择时，您实际上甚至无法触发任何内容。改成$("#selectPromo").on("change",function(){ //your code }

Answer 3

我使用 vanilla JavaScript 来编写我认为应该完成您正在尝试做的事情。我没有在您的代码中看到任何有关样式的内容。我在您的 HTML 中添加了一些 id 属性：

function init() {
  var selectElement = document.getElementById('selectPromo');
  document.getElementById('btnDelete').style.display = 'none';

  selectElement.addEventListener('change', function() {


    document.getElementById('selectedPromo').innerHTML = selectElement.options[this.value].text;

    document.getElementById('inputField').style.display = 'none';

    document.getElementById('add-layout').style.display = 'inline';
    document.getElementById('btnDelete').style.display = 'inline';
  });

  document.getElementById('btnDelete').addEventListener('click', function() {
    selectElement.value = '';
    document.getElementById('inputField').style.display = 'inline';
    document.getElementById('add-layout').style.display = 'none';
    document.getElementById('selectedPromo').innerHTML = '';
  });
}

init();

<div class="coupon-group">
  <div class="left">
    <div class="input-field" id="inputField">
      <div class="title">Select promotion</div>
      <div class="select-group">
        <select class="select-promo" id="selectPromo">
          <option value="">Please choose:</option>
          <option value="1" data-name="OfferA">Offer A</option>
          <option value="2" data-name="OfferB">Offer B</option>
          <option value="3" data-name="OfferC">Offer C</option>
          <option value="4" data-name="OfferD">Offer D</option>
        </select>
      </div>
    </div>
  </div>
  <div class="right"></div>
</div>
<div class="selected-promo" id="selectedPromo"></div>

<div class="hidden-content" id="add-layout">
  <div>
    <span class="btn-delete" id="btnDelete">X</span>
    <span class="name"></span>
    <input type="hidden" name="coupon_type[]" value="">
    <input type="hidden" name="coupon_value[]" value="">
  </div>
</div>