Question

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

我尝试编写如下脚本：

我正在尝试使用

if ($(promo).length > 0)

为了证明所选选项的存在，我仍然从控制台得到O，而我现在陷入困境，我无法得到理想的结果。

有没有人可以就此分享一些意见并告诉我该怎么做？非常感谢你抽出时间阅读这个问题。问候。

Answer 1

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

Answer 2

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

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

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>

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

3 个答案: